<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>DIV+CSS系统学习笔记回顾 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="CSS,XHTML,">
  

  <meta name="description" content="第一部分 HTML 第一章 职业规划和前景  职业方向规划定位：  web前端开发工程师 web网站架构师 自己创业 转岗管理或其他">
<meta name="keywords" content="CSS,XHTML">
<meta property="og:type" content="article">
<meta property="og:title" content="DIV+CSS系统学习笔记回顾">
<meta property="og:url" content="http://blog.poetries.top/2016/09/06/DIV+CSS系统学习笔记回顾/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="第一部分 HTML 第一章 职业规划和前景  职业方向规划定位：  web前端开发工程师 web网站架构师 自己创业 转岗管理或其他">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-1950ccf50810a92b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-3d15eb9c7be0cb65.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-4b0073fd050ba4f3.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-39e61a813f637282.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-320bad065d62c499.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-693242e2f03506f8.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-f72c1c8486445df1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-7ab9cda0bbd7e62f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-4b55b5085a7d0c56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-a893d4023c39c78a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-cbce5ef927ab2589.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:updated_time" content="2020-08-15T04:25:31.898Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="DIV+CSS系统学习笔记回顾">
<meta name="twitter:description" content="第一部分 HTML 第一章 职业规划和前景  职业方向规划定位：  web前端开发工程师 web网站架构师 自己创业 转岗管理或其他">
<meta name="twitter:image" content="http://upload-images.jianshu.io/upload_images/1480597-1950ccf50810a92b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#第一部分-HTML"><span class="toc-text">第一部分 HTML</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#第一章-职业规划和前景"><span class="toc-text">第一章 职业规划和前景</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第二章-html基本结构"><span class="toc-text">第二章 html基本结构</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第三章-html基本标签"><span class="toc-text">第三章 html基本标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第四章-img图片标签与路径"><span class="toc-text">第四章 img图片标签与路径</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第五章-三种列表的讲解"><span class="toc-text">第五章 三种列表的讲解</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第六章-表单元素-上"><span class="toc-text">第六章 表单元素(上)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第七章-表单和表格-下"><span class="toc-text">第七章 表单和表格(下)</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第二部分-CSS"><span class="toc-text">第二部分 CSS</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#第八章-css基础知识"><span class="toc-text">第八章 css基础知识</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第九章-css选择器-上"><span class="toc-text">第九章 css选择器(上)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十章-css选择器-下"><span class="toc-text">第十章 css选择器(下)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十一章-背景属性"><span class="toc-text">第十一章 背景属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十二章-文字文本属性"><span class="toc-text">第十二章 文字文本属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十三章-盒子模型"><span class="toc-text">第十三章 盒子模型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十四章-块元素、行元素与溢出"><span class="toc-text">第十四章 块元素、行元素与溢出</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十五章-定位"><span class="toc-text">第十五章 定位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十六章-框架"><span class="toc-text">第十六章 框架</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第十七章-css高级属性"><span class="toc-text">第十七章 css高级属性</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第三部分-附录"><span class="toc-text">第三部分 附录</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#附录一-DIV命名规范"><span class="toc-text">附录一 DIV命名规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录二-CSS精灵"><span class="toc-text">附录二 CSS精灵</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录三-一些tips解决方案"><span class="toc-text">附录三 一些tips解决方案</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#页面优化实践"><span class="toc-text">页面优化实践</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#写DIV-CSS-的一些常识"><span class="toc-text">写DIV+CSS 的一些常识</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#常用代码片段"><span class="toc-text">常用代码片段</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#一些总结"><span class="toc-text">一些总结</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#一些概念"><span class="toc-text">一些概念</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#方案荟萃扩展阅读"><span class="toc-text">方案荟萃扩展阅读</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录四-部分工具资源"><span class="toc-text">附录四 部分工具资源</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录五-编码规范"><span class="toc-text">附录五 编码规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录六-进阶学习"><span class="toc-text">附录六 进阶学习</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录七-其他资源"><span class="toc-text">附录七 其他资源</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录八-常见问题"><span class="toc-text">附录八 常见问题</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#其他"><span class="toc-text">其他</span></a></li></ol></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-DIV+CSS系统学习笔记回顾" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">DIV+CSS系统学习笔记回顾</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.09.06</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 12.5k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 50分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <h3 id="第一部分-HTML"><a href="#第一部分-HTML" class="headerlink" title="第一部分 HTML"></a>第一部分 HTML</h3><hr>
<h4 id="第一章-职业规划和前景"><a href="#第一章-职业规划和前景" class="headerlink" title="第一章 职业规划和前景"></a>第一章 职业规划和前景</h4><hr>
<ul>
<li><p><strong>职业方向规划定位：</strong></p>
<ul>
<li><code>web</code>前端开发工程师</li>
<li><code>web</code>网站架构师</li>
<li>自己创业</li>
<li>转岗管理或其他<a id="more"></a></li>
</ul>
</li>
<li><p><strong><code>web</code>前端开发的前景展望：</strong></p>
<ul>
<li>未来<code>IT</code>行业企业需求最多的人才</li>
<li>结合最新的<code>html5</code>抢占移动端的市场</li>
<li>自己创业做老板</li>
<li>随着互联网的普及<code>web</code>开发成为企业的宠儿和核心</li>
</ul>
</li>
<li><p><strong><code>web</code>职业发展目标：</strong></p>
<ul>
<li><p>第一、梳理知识架构</p>
<ul>
<li>负责内容的<code>HTML</code></li>
<li>负责外观的<code>css</code>（层叠样式表）</li>
<li>负责行为的<code>js</code></li>
<li><code>ps</code>切图</li>
</ul>
</li>
<li><p>第二、分解目标（起步阶段、提升阶段、成型阶段）</p>
<ul>
<li><p>起步阶段：</p>
<ul>
<li>基本知识的掌握</li>
<li>常用工具的掌握</li>
<li>沟通技巧的掌握（围绕客户的需求）</li>
<li>良好的开发习惯（加注释、对齐方式）</li>
</ul>
</li>
<li><p>提升阶段：</p>
<ul>
<li>熟悉掌握<code>HTML</code>基本标签和属性</li>
<li>熟练掌握<code>css</code>的基本语法和使用</li>
<li>浏览器兼容和w3c标准的掌握</li>
<li>结合<code>html</code>+<code>css</code>+<code>js</code>开始系统项目的开发</li>
</ul>
</li>
<li><p>成型阶段：</p>
<ul>
<li>精通<code>DIV</code>+<code>CCS</code>布局</li>
<li>精通<code>css</code>样式表控制<code>html</code>标签</li>
<li>熟悉运用<code>js</code>制作动态网站的效果</li>
<li>能独立开发完成网站</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h4 id="第二章-html基本结构"><a href="#第二章-html基本结构" class="headerlink" title="第二章 html基本结构"></a>第二章 html基本结构</h4><hr>
<ul>
<li><p>认识HTML：</p>
<ul>
<li><code>html</code>不是一种编程语言，是一种标志语言</li>
<li>标记语言是由一套标识标签组成的</li>
<li><code>html</code>使用标签来描述网页</li>
</ul>
</li>
<li><p><code>html</code>结构：</p>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;html&gt;</span><br><span class="line">    &lt;head&gt;&lt;/head&gt;</span><br><span class="line">    &lt;body&gt;&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>不成对出现的标签<br><code>&lt;br&gt;</code> <code>&lt;hr&gt;</code>  <code>&lt;meta&gt;</code> <code>&lt;img&gt;</code>  <code>&lt;input..&gt;</code>  <code>&lt;option..&gt;</code>  <code>&lt;link&gt;</code></li>
</ul>
<ul>
<li><p><strong>HTML 基本标签的讲解：</strong></p>
<ul>
<li><code>&lt;html&gt;</code> <code>&lt;head&gt;</code> <code>&lt;body&gt;</code>标签</li>
<li><code>&lt;h1&gt;</code>—-<code>&lt;h6&gt;</code>仅仅用于标题文本，不要为了产生粗体文本使用它们</li>
<li><code>&lt;p&gt;</code>标签  段落标签</li>
<li><p><code>&lt;strong&gt;&lt;b&gt;</code>标签</p>
</li>
<li><p>都会让文字产生加粗效果</p>
<ul>
<li><code>&lt;strong&gt;</code>用于强调文本，强度更深，表示重要文本—&gt;用于<code>SEO</code>优化</li>
<li><code>&lt;b&gt;</code>只是视觉加粗效果—&gt;单纯为了产生加粗</li>
</ul>
</li>
</ul>
<ul>
<li><code>&lt;em&gt;</code> <code>&lt;i&gt;</code>标签<ul>
<li><code>em</code>用于强调文本</li>
<li><code>i</code>只是视觉斜体效果</li>
<li><code>&lt;strong&gt;</code>比<code>&lt;em&gt;</code>强调更强</li>
</ul>
</li>
<li>特殊符号：<ul>
<li><code>&amp;nbsp</code>; —-&gt;空格</li>
<li><code>&amp;gt</code>; —&gt;大于号</li>
<li><code>&amp;lt</code>；—&gt;小于号</li>
<li><code>&amp;quot</code>；—&gt;引号</li>
<li><code>&amp;copy</code>;–&gt;版权号</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h4 id="第三章-html基本标签"><a href="#第三章-html基本标签" class="headerlink" title="第三章 html基本标签"></a>第三章 html基本标签</h4><hr>
<ul>
<li><p><code>HTMl</code>基本标签：</p>
<ul>
<li><code>span</code>标签<ul>
<li>对被用来组合文档中的行内元素</li>
<li>注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化</li>
</ul>
</li>
<li><code>&lt;pre&gt;</code>标签<ul>
<li>文字的格式按源码的排版来显示，我们称之为预处理格式</li>
</ul>
</li>
<li><p><code>&lt;a&gt;</code>标签—&gt;他有一个必不可少的属性 href </p>
<ul>
<li><code>target</code>属性：</li>
<li><code>_self</code>(在原来页面打开) </li>
<li><code>_blank</code>（新窗口打开）</li>
<li><code>_top</code>（打开时忽略所有的框架） </li>
<li><code>_parent</code>（在父窗口中打开）</li>
</ul>
</li>
<li><p>创建锚点和锚链接</p>
<ul>
<li>锚点也是一种超链接，是页面内进行跳转的超链接<ul>
<li>第一步：创建锚点 <code>&lt;a name=&quot;锚点名称&quot;&gt;&lt;/a&gt;</code></li>
<li>第二步：使用创建好的锚点名称 <code>&lt;a href=&quot;#锚点名称&quot;&gt;内容&lt;/a&gt;</code></li>
</ul>
</li>
</ul>
</li>
<li><code>marquee</code>标签<ul>
<li>可以创建一个内容滚动效果</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;marquee direction=&quot;down&quot; loop=&quot;4&quot; onmouseover=this.stop() onmouseout=this.start()&gt;&lt;/marquee&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li><code>direction</code> 表示滚动方向，取值有（left,right,up,down,默认left）</li>
<li><code>loop</code>表示滚动循环的次数，默认为无限循环</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">onmouseover=this.stop()  onmouseover=this.start()  scrollamout=&quot;1&quot;(滚动速度)</span><br></pre></td></tr></table></figure>
<ul>
<li>表示当鼠标移上区域的时候停止滚动，鼠标移开继续滚动</li>
</ul>
<hr>
<h4 id="第四章-img图片标签与路径"><a href="#第四章-img图片标签与路径" class="headerlink" title="第四章 img图片标签与路径"></a>第四章 img图片标签与路径</h4><hr>
<ul>
<li><p>图片标签与路径：</p>
<ul>
<li>常见图片格式 <code>jpg</code> <code>png</code> <code>gif</code></li>
<li><code>Gif</code>     （只支持全透明）</li>
<li><code>Jpeg</code> /<code>jpg</code>     </li>
<li><code>Png</code> 半/全透明都支持</li>
</ul>
</li>
<li><p>图片标签写法 ：</p>
<ul>
<li><code>&lt;img src=&quot;&quot; alt=&quot;&quot; width=&quot;&quot; height=&quot;&quot; /&gt;</code></li>
</ul>
</li>
<li><p>图片四要素：</p>
<ul>
<li><code>src=&quot;&quot;</code>        图片路径</li>
<li><code>alt=&quot;&quot;</code>       图片含义</li>
<li><code>width=&quot;&quot;</code>     图片宽度 和图片大小保持一致</li>
<li><code>height=&quot;&quot;</code>     图片高度 和图片大小保持一致</li>
<li><code>title=&quot;&quot;</code></li>
</ul>
</li>
<li><p>路径知识：</p>
<ul>
<li><p>相对路径、绝对路径：</p>
<ul>
<li>相对路径：(Relative Path) 相对于该文件的路径；</li>
<li>绝对路径：(Absolute Path) 从磁盘出发的路径； </li>
</ul>
</li>
<li><p><code>&lt;img src=&quot;&quot; …… align=&quot;&quot; /&gt;</code> <code>align</code>属性–设置图片与后面文字的位置关系<br>值–<code>top</code>、<code>bottom</code>、<code>middle</code>、<code>absmiddle</code>、<code>left</code>、<code>right</code></p>
</li>
</ul>
</li>
<li><p>在静态页面中：</p>
<ul>
<li><p><code>/</code>开头表示根目录；</p>
</li>
<li><p><code>./</code>表示当前目录；（斜画线前面一个点）</p>
</li>
<li><p><code>../</code>上级目录；（斜画线前面两个点）</p>
</li>
<li><p>直接用文件名不带/也表示同一目录</p>
</li>
</ul>
<ul>
<li>这些都是相对于当前文件的位置来说的，如果用绝对路径的话就是写全了。</li>
</ul>
</li>
</ul>
<hr>
<h4 id="第五章-三种列表的讲解"><a href="#第五章-三种列表的讲解" class="headerlink" title="第五章 三种列表的讲解"></a>第五章 三种列表的讲解</h4><hr>
<ul>
<li>三种列表的知识讲解：<ul>
<li><code>&lt;ul&gt;</code>无序列表<ul>
<li>无序列表是一个没有顺序项目的列表，此列表项默认粗体圆点进行标识</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">   &lt;li&gt;&lt;/li&gt;</span><br><span class="line">   &lt;li&gt;&lt;/li&gt;</span><br><span class="line">   &lt;li&gt;&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li><ol>有序列表<ul>
<li>有序列表也是一列项目，只是列表项目使用的是数字进行标记。 有序列表始于 <code>&lt;ol&gt;</code> 标签。每个列表项始于 <code>&lt;li&gt;</code>标签。</li>
</ul>
</ol></li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;ol&gt;</span><br><span class="line">   &lt;li&gt;内容一&lt;/li&gt;</span><br><span class="line">   &lt;li&gt;内容二&lt;/li&gt;</span><br><span class="line">   &lt;li&gt;内容三&lt;/li&gt;</span><br><span class="line">&lt;/ol&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li><p>列表符号</p>
<ul>
<li><p>无序列表-列表符号:</p>
<ul>
<li><code>type=&quot;circle&quot;</code>  空心圆 <code>type=“disc”</code> 实心圆  默认值 <code>type=&quot;square&quot;</code> 方块符</li>
</ul>
</li>
<li><p>有序列表-列表符号</p>
<ul>
<li><code>type=&quot;A&quot;</code>    A B C D</li>
<li><code>type=&quot;a&quot;</code>    a b c d</li>
<li><code>type=&quot;1&quot;</code>    1 2 3 4  默认值type=”I”    I II III type=”i”     i ii iii</li>
</ul>
</li>
<li><p>列表嵌套</p>
</li>
<li><p>无序列表-嵌套</p>
</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line"> &lt;li&gt;柚子</span><br><span class="line">  &lt;ul&gt;</span><br><span class="line">   &lt;li&gt;沙田柚&lt;/li&gt;</span><br><span class="line">   &lt;li&gt;蜜柚&lt;/li&gt;</span><br><span class="line">  &lt;/ul&gt;</span><br><span class="line"> &lt;/li&gt;</span><br><span class="line"> &lt;li&gt;荔枝&lt;/li&gt;</span><br><span class="line"> &lt;li&gt;苹果&lt;/li&gt;&lt;/ul&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>有序列表-嵌套</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;ol&gt;</span><br><span class="line"> &lt;li&gt;茶</span><br><span class="line">  &lt;ul&gt;</span><br><span class="line">   &lt;li&gt;红茶&lt;/li&gt;</span><br><span class="line">   &lt;li&gt;绿茶&lt;/li&gt;</span><br><span class="line">  &lt;/ul&gt;</span><br><span class="line"> &lt;/li&gt;</span><br><span class="line"> &lt;li&gt;果汁&lt;/li&gt;</span><br><span class="line"> &lt;li&gt;牛奶&lt;/li&gt;&lt;/ol&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>定义列表<ul>
<li>定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表以 <code>&lt;dl&gt;</code> 标签开始。每个定义列表项以 <code>&lt;dt&gt;</code>开始。每个自定义列表项的定义以 <code>&lt;dd&gt;</code> 开始。</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;dl&gt;  </span><br><span class="line">     &lt;dt&gt;pc网页制作&lt;/dt&gt;  </span><br><span class="line">     &lt;dd&gt;学习DIV+CSS JS JQ 项目实战&lt;/dd&gt;  </span><br><span class="line">     &lt;dt&gt;手机网页制作&lt;/dt&gt;  </span><br><span class="line">     &lt;dd&gt;手机网页制作实战&lt;/dd&gt;</span><br><span class="line">&lt;/dl&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>dd</code>是对<code>dt</code>的解释</p>
<ul>
<li><code>&lt; dl&gt;&lt; /dl&gt;</code>用来创建一个普通的列表,</li>
<li><code>&lt; dt&gt;&lt; /dt&gt;</code>用来创建列表中的上层项目，</li>
<li><code>&lt; dd&gt;&lt; /dd&gt;</code>用来创建列表中最下层项目，</li>
<li><code>&lt; dt&gt;&lt; /dt&gt;</code>和<code>&lt; dd&gt;&lt; /dd&gt;</code>都必须放在<code>&lt; dl&gt;&lt; /dl&gt;</code>标志对之间。</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;dl&gt;</span><br><span class="line">    &lt;dt&gt;中国城市&lt;/dt&gt;</span><br><span class="line">    &lt;dd&gt;北京 &lt;/dd&gt;</span><br><span class="line">    &lt;dd&gt;上海 &lt;/dd&gt;</span><br><span class="line">    &lt;dd&gt;广州 &lt;/dd&gt;</span><br><span class="line">    &lt;dt&gt;美国城市&lt;/dt&gt;</span><br><span class="line">    &lt;dd&gt;华盛顿 &lt;/dd&gt;</span><br><span class="line">    &lt;dd&gt;芝加哥 &lt;/dd&gt;</span><br><span class="line">    &lt;dd&gt;纽约 &lt;/dd&gt;</span><br><span class="line">&lt;/dl&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li><code>dl</code>是d<code>efinition list</code>的缩写</li>
<li><code>dt</code>是<code>definition title</code>的缩写</li>
<li><code>dd</code>是d<code>efinition description</code>的缩写</li>
</ul>
<ul>
<li><code>list-style</code>属性具有三个属性分量：</li>
<li><code>list-style-position</code> ：设置列表项图标的位置，位于文本内或者文本外</li>
<li><code>list-style-type</code>： 设置列表项图标的类型</li>
<li><code>list-style-image</code>：使用图像设置列表项图标</li>
</ul>
<hr>
<h4 id="第六章-表单元素-上"><a href="#第六章-表单元素-上" class="headerlink" title="第六章 表单元素(上)"></a>第六章 表单元素(上)</h4><hr>
<ul>
<li><p>表单标签:</p>
<ul>
<li><p><code>&lt;form&gt;</code>表单标签</p>
<ul>
<li><code>&lt;form&gt;</code>表单是一个包含表单元素的区域，包括起来的都是表单的内容<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;form&gt;</span><br><span class="line"> &lt;input type=&quot;text&quot;/&gt;</span><br><span class="line">&lt;/form&gt;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
</li>
<li><p>HTML标签 - <code>Action</code>和确认按钮： </p>
<ul>
<li>当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;form action=&quot;html.do&quot; method=&quot;get&quot;&gt;    </span><br><span class="line">        username:  &lt;input type=&quot;text&quot; name=&quot;user&quot; /&gt;   </span><br><span class="line">        &lt;input type=&quot;submit&quot; value=&quot;提  交&quot; /&gt;</span><br><span class="line">&lt;/form&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>HTML</code>标签 - 隐藏域隐藏标签：</p>
</li>
<li><p>隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器</p>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;form&gt;        </span><br><span class="line">     &lt;input type=&quot;hidden&quot; name=&quot;hid&quot; value=&quot;value&quot;&gt;</span><br><span class="line">&lt;/form&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>&lt;input&gt;</code>标签的掌握</p>
<ul>
<li><p>常用<code>type</code>类型：</p>
<ul>
<li><code>&lt;input type=&quot;&quot; name=&quot;&quot; value=&quot;&quot; /&gt;</code></li>
<li><code>type=&quot;text&quot;</code>       单行文本输入框</li>
<li><code>type=&quot;password&quot;</code>    密码（<code>maxlength=&quot;&quot;</code>）</li>
<li><code>type=&quot;radio&quot;</code>     单项选择（<code>checked=&quot;checked&quot;</code>） </li>
<li><code>type=&quot;checkbox&quot;</code>   多项选择  </li>
<li><code>type=&quot;button&quot;</code>    按钮</li>
<li><code>type=&quot;submit&quot;</code>    提交 <code>type=&quot;image&quot;</code>图片提交</li>
<li><code>type=&quot;file&quot;</code>    上传文件</li>
<li><code>type=&quot;reset&quot;</code>重置</li>
<li><code>type=&quot;hidden&quot;</code>    隐藏</li>
</ul>
</li>
</ul>
</li>
<li><p>关于表单中的设置默认值：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;input type=&quot;text&quot; name=&quot;&quot; value=&quot;今天心情不错&quot; /&gt;</span><br><span class="line">&lt;input type=&quot;radio&quot; name=&quot;&quot; value=&quot;&quot; checked=&quot;checked&quot;&gt;</span><br><span class="line">&lt;input type=&quot;checkbox&quot; name=&quot;&quot; value=&quot;&quot; checked=&quot;checked&quot;&gt;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;select name=&quot;&quot; &gt;</span><br><span class="line"> &lt;option  value=&quot;&quot;&gt;&lt;/option&gt;</span><br><span class="line"> &lt;option  value=&quot;&quot; selected=&quot;selected&quot;&gt;&lt;/option&gt;</span><br><span class="line">&lt;select&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>textarea</code>没有默认值</p>
</li>
<li><p><code>&lt;label&gt;</code>标签的使用</p>
<ul>
<li><p><code>&lt;label&gt;&lt;/label&gt;</code></p>
<ul>
<li><code>label</code> 元素不会向用户呈现任何特殊效果。</li>
<li>不过，它为鼠标用户改进了可用性。</li>
<li>如果您在 <code>label</code> 元素内点击文本，就会触发此控件。</li>
<li>就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。</li>
</ul>
</li>
<li><p><code>&lt;label&gt;</code> 标签的<code>for</code> 属性应当与相关元素的 <code>id</code>属性相同。</p>
</li>
<li><p>例子：（重要—注册表单–用户体验–必做）</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;p&gt;单向选择&lt;/p&gt;</span><br><span class="line">&lt;label for=&quot;male&quot;&gt;男：&lt;/label&gt;&lt;input type=&quot;radio&quot; name=&quot;sex&quot; id=&quot;male&quot;/&gt;</span><br><span class="line">&lt;label for=&quot;nv&quot;&gt;女：&lt;/label&gt;&lt;input type=&quot;radio&quot; name=&quot;sex&quot;checked=&quot;check&quot;/&gt;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<hr>
<h4 id="第七章-表单和表格-下"><a href="#第七章-表单和表格-下" class="headerlink" title="第七章 表单和表格(下)"></a>第七章 表单和表格(下)</h4><hr>
<ul>
<li>表单和表格标签：<ul>
<li><code>&lt;textarea&gt;</code>文本域标签</li>
<li><code>&lt;textarea&gt;</code>标签：</li>
<li><code>&lt;textarea&gt;&lt;/textarea&gt;</code>是文本域标签，可以在其中插入一段文字内容，它有两个常用属性<code>rows</code>和<code>cols</code></li>
</ul>
</li>
<li><p>注意：</p>
<ul>
<li><code>rows</code>表示这个文本域有多少行</li>
<li><code>cols</code>表示这个文本域有多少列</li>
</ul>
</li>
<li><p>除了这两个属性它还有<code>readonly</code>（只读，文本域的内容无法改变，相当于协议）和<code>title</code>（鼠标放上提示）</p>
</li>
<li><p><code>&lt;select&gt;</code>标签的掌握</p>
<ul>
<li>注：当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <code>&lt;select&gt;</code> 表单数据提交给服务器时包括 <code>name</code>属性<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;form&gt;      </span><br><span class="line">    &lt;select name=&quot;&quot;  id=&quot;&quot;&gt;</span><br><span class="line">         &lt;option value=&quot;1&quot;&gt;1月&lt;/option&gt;  </span><br><span class="line">          &lt;option value=&quot;2&quot;&gt;2月&lt;/option&gt;      </span><br><span class="line">&lt;/select&gt;</span><br><span class="line">&lt;/form&gt;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>常用到的属性：<code>disabled=“disabled”  name=&quot;sel&quot;  size=&quot;2&quot;</code></p>
</li>
</ul>
<ul>
<li><code>&lt;table&gt;</code>表格标签</li>
<li><p><code>&lt;table&gt;</code>表格标签：<code>&lt;table&gt;</code>是表格标签，可以用它定义一个表格。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;table border=&quot;1&quot;&gt;</span><br><span class="line">    &lt;tr&gt;</span><br><span class="line">    &lt;td&gt;姓名&lt;/td&gt;</span><br><span class="line">    &lt;td&gt;性别&lt;/td&gt;</span><br><span class="line">    &lt;/tr&gt;</span><br><span class="line">&lt;/table&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>注意：<code>&lt;table&gt;</code>的<code>border</code>属性不能少</p>
</li>
</ul>
<ul>
<li><p><code>&lt;tr&gt;</code> <code>&lt;td&gt;</code>标签的使用</p>
<ul>
<li><p><code>&lt;tr&gt;</code>行标签：</p>
<ul>
<li><code>&lt;tr&gt;</code>可以定义表格中的一行，一个&lt;<code>tr&gt;&lt;/tr&gt;</code>表示一行。</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;table border=&quot;1&quot;&gt;</span><br><span class="line">&lt;tr&gt;</span><br><span class="line"> &lt;td&gt;姓名&lt;/td&gt;</span><br><span class="line"> &lt;td&gt;性别&lt;/td&gt;</span><br><span class="line">&lt;/tr&gt;</span><br><span class="line"></span><br><span class="line">&lt;tr&gt;</span><br><span class="line"> &lt;td&gt;姓名&lt;/td&gt;</span><br><span class="line"> &lt;td&gt;性别&lt;/td&gt;</span><br><span class="line">&lt;/tr&gt;</span><br><span class="line">&lt;/table&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>&lt;td&gt;</code>单元格标签:</p>
<ul>
<li><code>&lt;td&gt;</code>可以定义表格中的一个单元格，<code>&lt;td&gt;&lt;/td&gt;</code>表示一个单元格。<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;table border=&quot;1&quot;&gt;</span><br><span class="line">&lt;tr&gt;</span><br><span class="line">&lt;td &gt;姓名&lt;/td&gt;</span><br><span class="line">&lt;td&gt;性别&lt;/td&gt;</span><br><span class="line">&lt;td&gt;爱好&lt;/td&gt;</span><br><span class="line">&lt;/tr&gt;</span><br><span class="line">&lt;/table&gt;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<ul>
<li><code>border-collapse</code> 属性设置是否将表格边框折叠为单一边框：</li>
<li><code>border-collapse:collapse</code>;</li>
<li><code>colspan</code>左右合并</li>
<li><code>rowspan</code>上下合并</li>
</ul>
</li>
</ul>
<p><strong>第一部分总结</strong>：</p>
<ul>
<li>非可视化标签：<code>head</code>  <code>meta</code>  <code>style</code>  <code>scrpit.</code>..</li>
<li>可视化标签：<code>img</code>  <code>div</code> <code>span</code> <code>a</code> <code>ul</code> <code>li</code>…</li>
<li>只有可视化标签，才能用<code>css</code>改变它</li>
<li>单标签：<code>meta</code>  <code>link</code>  <code>base</code>  <code>img</code>  <code>input</code> <code>br</code> <code>hr</code></li>
<li><p>双标签：<code>html</code> <code>head</code> <code>body</code>  <code>div</code>  <code>a</code>  <code>p</code>  <code>span</code> ..<code>ul</code> <code>li</code> <code>ol</code> <code>dl</code> ….</p>
</li>
<li><p><strong>常用可视化标签</strong></p>
<ul>
<li><strong> <code>div</code></strong> <ul>
<li>一般用它来布局</li>
</ul>
</li>
<li><strong>a</strong>  超链接标签<ul>
<li><code>href</code>*属性：设置跳转的网页地址</li>
<li><code>target</code>属性：设置跳转的目标</li>
<li>结论：凡事页面可以点击跳转或者表单提交的文字，都用<code>a</code>标签</li>
</ul>
</li>
<li><strong><code>img</code></strong><ul>
<li><code>src</code>*属性用来设置图片的url数据</li>
<li><code>alt</code>提供给搜索引擎搜索的</li>
<li><code>width</code></li>
<li><code>height</code></li>
<li>结论 ：显示图片</li>
</ul>
</li>
<li><strong>ul li</strong><ul>
<li>列表</li>
<li>结论：只要将来设计页面中有固定样式的列表，就用ul和li</li>
</ul>
</li>
<li><strong><code>table</code> <code>caption</code> <code>tr</code> <code>td (th)</code></strong><ul>
<li>慢慢已经被淘汰了 被ul li代替</li>
<li>如果是合并竖排的就是合并行（<code>rowspan</code>）</li>
<li>如果是合并横排的就是合并列（<code>colspan</code>）</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<p><strong>HTML部分导图总结</strong></p>
<hr>
<ul>
<li><a href="http://www.html5star.com/manual/html5label-meaning/" target="_blank" rel="noopener">HTML5标签集合</a></li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-1950ccf50810a92b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-3d15eb9c7be0cb65.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-4b0073fd050ba4f3.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<hr>
<h3 id="第二部分-CSS"><a href="#第二部分-CSS" class="headerlink" title="第二部分 CSS"></a>第二部分 CSS</h3><hr>
<h4 id="第八章-css基础知识"><a href="#第八章-css基础知识" class="headerlink" title="第八章 css基础知识"></a>第八章 css基础知识</h4><hr>
<ul>
<li><code>css</code>基础知识：<ul>
<li><code>css</code>样式表的定义</li>
<li><code>css</code>：（Cascading Style Sheets）层叠样式表；</li>
</ul>
</li>
<li>分类及位置：内部样式<code>-head</code>区域<code>style</code>标签里面<ul>
<li>外部样式-<code>link</code>调用</li>
<li>内联样式-标签元素里面</li>
</ul>
</li>
<li><code>css</code>内的注释：/<code>*</code>注释内容<code>*</code>/</li>
<li><p><code>css</code>样式表的语法</p>
<ul>
<li><p><code>CSS</code>规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。</p>
</li>
<li><p>盒子名或者标签名{属性:值;}</p>
</li>
<li><p><strong>CSS中几种颜色的表示方法</strong></p>
<ul>
<li><strong>用颜色名表示</strong><ul>
<li>有17个预先确定的颜色，它们是<ul>
<li><code>aqua</code>, <code>black</code>, <code>blue</code>, <code>fuchsia</code>, <code>gray</code>, <code>green</code>, <code>lime</code>, <code>maroon</code>, <code>navy</code>,<br>　　<code>olive</code>, <code>orange,</code> <code>purple</code>, <code>red</code>, <code>silver</code>, <code>teal</code>, <code>white</code>, and <code>yellow</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><p><strong>用十六进制的颜色值表示(红、绿、蓝)</strong></p>
<ul>
<li><code>#FF0000</code>或者<code>#F00</code> </li>
</ul>
</li>
<li><p><strong>用rgb(r,g,b)函数表示</strong></p>
<ul>
<li>如：<code>rgb(255,255,0)</code></li>
</ul>
</li>
<li><p><strong>用hsl(Hue,Saturation,Lightness)函数表示（色调、饱和度、亮度)</strong></p>
<ul>
<li>如：<code>hsl(120,100%,100%)</code>,色调0代表红色，<code>120</code>代表绿色，<code>240</code>代表<br>蓝色 </li>
</ul>
</li>
<li><p><strong>用<code>rgba(r,g,b,a)</code>函数表示 </strong></p>
<ul>
<li>其中<code>a</code>表示的是改颜色的透明度，取值范围是<code>0~1</code>，其中<code>0</code>代表完全透明</li>
</ul>
</li>
<li><p><strong>用hsla(Hue,Saturation,Lightness,alpha)函数表示</strong></p>
<ul>
<li>色调、饱和度、亮度、透明度 </li>
</ul>
</li>
<li>例子</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"position:absolute;top:0px"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color:gray;"</span>&gt;</span>background-color:gray<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color:#F00;"</span>&gt;</span>background-color:#F00<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color:#ffff00;"</span>&gt;</span>background-color:#ffff00<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color:rgb(255,0,255);"</span>&gt;</span>background-color:rgb(255,0,255)<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color:hsl(120,80%,50%);"</span>&gt;</span>background-color:hsl(120,80%,50%)<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color:rgba(255,0,255,0.5);"</span>&gt;</span>background-color:rgba(255,0,255,0.5)<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"background-color:hsla(120,80%,50%,0.5);"</span>&gt;</span>background-color:hsla(120,80%,50%,0.5)<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-39e61a813f637282.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<ul>
<li>内部样式表<ul>
<li>当单个页面需要设置样式时，就应该使用内部样式表。</li>
<li>使用 <code>&lt;style&gt;&lt;/style&gt;</code>标签在文档<code>&lt;head&gt;&lt;/head&gt;</code>里面定义内部样式表</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;head&gt;</span><br><span class="line"> &lt;style type=&quot;text/css&quot; &gt;</span><br><span class="line">  p&#123;color:red;&#125;</span><br><span class="line"> &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>从外部引入到样式分为两种：（注意写在<code>head</code>标签里面）  </li>
<li><p>当样式需要应用于很多页面时，就需要用到外部样式表，首先需要创建一个<code>css</code>文件，然后引用到我们的页面中。</p>
</li>
<li><p><code>Link</code>样式表式：  <code>&lt;link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)&gt;</code></p>
</li>
<li><p><code>Html</code>式：  <code>&lt;style type=&quot;text/css&quot;&gt;@import url(&quot;css.css&quot;);&gt;&lt;/style&gt;</code> </p>
</li>
</ul>
<ul>
<li><p>内联样式表（优先级高）</p>
<ul>
<li><p>写在标签里面的样式</p>
</li>
<li><p>如：<code>&lt;p style=&quot;color:red;&quot;&gt;&lt;/p&gt;</code></p>
</li>
</ul>
</li>
<li><p>表示给<code>p</code>标签里面的文字颜色设置为红色</p>
</li>
<li><p>区别：外链样式与导入样式</p>
<ul>
<li><p><code>link</code>标签是属于<code>xhtml</code>范畴，而<code>@import</code>则是<code>css2.1</code>中特有的。<code>link</code>标签除了可以加载<code>CSS</code>外，还可以做很多其它的事情，比如定义<code>RSS</code>，定义<code>rel</code>连接属性等，<code>@import</code>就只能加载<code>CSS</code>了。 </p>
</li>
<li><p>加载的顺序的区别，<code>link</code>加载的<code>css</code>时，是一种并行(没有尝试是否是这样)加载<code>CSS</code>方式，而<code>@impor</code>则在整个页面加载完成后才加载。</p>
</li>
<li><p>兼容性的区别，因<code>@import`</code>CSS2.1<code>才特有的，所以对于不兼容</code>CSS2.1`的浏览器来说，无效。</p>
</li>
<li><p>在样式控制上(比如动态改变网页的布局时,使用<code>javascript</code>操作<code>DOM</code>)的区别，此时<code>@import</code>就无能为力了。</p>
</li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><strong>样式的优先级补充</strong><ul>
<li>相同权值情况下，<code>CSS</code>样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：<ul>
<li><code>内联样式表（标签内部）</code> &gt; <code>嵌入样式表（当前文件中）</code>&gt; <code>外部样式表（外部文件中）</code></li>
</ul>
</li>
</ul>
</li>
<li><p>权值不同时，浏览器是根据权值来判断使用哪种<code>css</code>样式的，哪种样式权值高就使用哪种样式</p>
</li>
<li><p>层叠优先级是:</p>
<ul>
<li><code>浏览器缺省</code>&lt; <code>外部样式表</code> &lt; <code>内部样式表</code> &lt; <code>内联样式</code></li>
</ul>
</li>
<li>其中样式表又有:<code>类选择器</code> &lt; <code>类派生选择器</code>&lt;<code>ID选择器</code> &lt; <code>ID派生选择器</code></li>
<li><p>派生选择器以前叫上下文选择器，所以完整的层叠优先级是:</p>
<ul>
<li><code>浏览器缺省</code> &lt;<code>外部样式表</code> &lt; <code>外部样式表类选择器</code> &lt; <code>外部样式表类派生选择器</code>&lt; <code>外部样式表ID选择器</code> &lt; <code>外部样式表ID派生选择器</code>&lt; <code>内部样式表</code> &lt; <code>内部样式表类选择器</code> &lt; <code>内部样式表类派生选择器</code> &lt; <code>内部样式表ID选择器</code> &lt; <code>内部样式表ID派生选择器</code> &lt; <code>内联样式</code>…共<code>12</code>个优先级</li>
</ul>
</li>
<li><p>另外，如果同一个元素在没有其他样式的作用影响下，其<code>Class</code>定义了多个并以空格分开，其优先级顺序为：</p>
<ul>
<li>一个元素同时应用多个<code>class</code>，后定义的优先（即近者优先），加上<code>!important</code>者最优先！</li>
</ul>
</li>
</ul>
<hr>
<h4 id="第九章-css选择器-上"><a href="#第九章-css选择器-上" class="headerlink" title="第九章 css选择器(上)"></a>第九章 css选择器(上)</h4><ul>
<li><code>css</code>选择器：<ul>
<li><code>class</code>类选择器可以重复利用    </li>
<li><code>id</code>选择器唯一</li>
</ul>
</li>
<li>标签选择器<ul>
<li>什么是选择器：css选择器就是要改变样式的对象</li>
</ul>
</li>
<li><p>选择器<code>{属性:值;属性:值;}</code></p>
</li>
<li><p>标签选择器：页面中所有的标签都是一个选择器  <code>p{color:red;}</code></p>
</li>
<li><p><code>ID</code>选择器</p>
<ul>
<li>选择<code>id</code>命名的元素 以 <code>#</code> 开头   <code>#p1{color:#0f0;}</code></li>
</ul>
</li>
<li><p>类选择器</p>
<ul>
<li><code>class</code>选择器，选择<code>clas</code>命名的元素 以<code>.</code>开头  <code>.first{color:#00f;}</code></li>
</ul>
</li>
<li><code>css</code>代码写完后上线前要经过压缩处理 </li>
<li>本地和服务器分两个<code>css</code>版本（备份）</li>
<li><p>压缩后注释都清除，空间体积减少</p>
</li>
<li><p>群组选择器</p>
<ul>
<li>选择多个元素,以逗号隔开 <code>#main,.first,span,a,h1{color:red;}</code></li>
</ul>
</li>
<li>包含选择器<ul>
<li>选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开<code>p</code>   <ul>
<li><code>span{color:red;}</code></li>
</ul>
</li>
</ul>
</li>
<li><p>属性选择器</p>
<ul>
<li>选择包含某一属性的元素</li>
<li><code>a[title]{color:red;}</code>  选择包含<code>title</code>的<code>a</code>标签</li>
<li><code>a[title][href]{color:red;}</code> 选择包含<code>title</code>和<code>href</code>的<code>a</code>标签</li>
</ul>
</li>
<li><p><code>&gt;</code> <code>+</code> 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）</p>
<ul>
<li><code>p &gt; span{color:red;}</code></li>
</ul>
</li>
<li>相邻兄弟选择器：只选择后面的相邻兄弟元素<ul>
<li><code>p + span{color:red;}</code></li>
</ul>
</li>
</ul>
<hr>
<h4 id="第十章-css选择器-下"><a href="#第十章-css选择器-下" class="headerlink" title="第十章 css选择器(下)"></a>第十章 css选择器(下)</h4><hr>
<ul>
<li><code>&lt;a&gt;</code>伪类选择器<ul>
<li><code>a:link {color:#FF0000;}</code>    /<em> 未访问的链接 </em>/ （只用于a标签）</li>
<li><code>a:visited {color:#00FF00;}</code>    /<em> 已访问的链接 </em>/ （只用于a标签）</li>
<li><code>a:hover {color:#FF00FF;}</code>/* 鼠标移动到链接上</li>
<li><code>*/</code>（可和其他标签结合一起用）</li>
<li><code>a:active {color:#0000FF;}</code>    /<em> 选定的链接 </em>/</li>
<li><strong>注意</strong><ul>
<li>伪类选择器的排序很重要，<code>a:link</code> <code>a:visited</code> <code>a:hover</code> <code>a:active</code>，记作<code>lvha</code></li>
</ul>
</li>
</ul>
</li>
<li><p>输入伪类选择器（针对表单）</p>
<ul>
<li><code>input:focus{color:red;}</code>      /<em> 键盘输入焦点 </em>/</li>
</ul>
</li>
<li><p>其他伪类选择器</p>
<ul>
<li><code>p:first-child{color:red;}</code>     /<code>* 第一个p *</code>/</li>
<li><code>:before</code> 在元素之前添加内容。</li>
<li><code>:after</code> 在元素之后添加内容。</li>
</ul>
</li>
<li><p><code>css</code>优先规则</p>
<ul>
<li>内联样式表-&gt; <code>ID</code> 选择器—&gt; <code>Class</code> 类选择器-&gt;标签选择器</li>
</ul>
</li>
</ul>
<hr>
<h4 id="第十一章-背景属性"><a href="#第十一章-背景属性" class="headerlink" title="第十一章 背景属性"></a>第十一章 背景属性</h4><hr>
<ul>
<li><p>背景属性：</p>
<ul>
<li><p>背景的添加 ：</p>
</li>
<li><p>背景颜色的添加:</p>
<ul>
<li><code>background:red;</code></li>
<li><code>backgronnd-color:red;</code></li>
</ul>
</li>
<li><p>背景图片的添加：</p>
<ul>
<li><code>background:url(“images/1.jpg”);</code></li>
<li><code>backgronnd-image:url(“images/1.jpg”);</code></li>
</ul>
</li>
<li>背景的平铺</li>
<li>什么是平铺？平铺就是图片是否重复出现<ul>
<li>不平铺：<code>background-repeat:no-repeat;</code></li>
<li>水平方向平铺：<code>background-repeat:repeat-x;</code></li>
<li>垂直方向平铺：<code>background-repeat:repeat-y;</code></li>
<li>完全平铺：默认为完全平铺</li>
</ul>
</li>
<li>背景图片的定位<ul>
<li>背景图片的定位就是可以设置显示背景图片的位置，通过属性<code>background-position</code>来实现</li>
<li><code>background-position</code>的取值可为英文单词或者数值和百分值。</li>
<li><code>background-positon</code>的英文单词取值</li>
<li><code>top left</code>                   </li>
<li><code>top  center</code>                   </li>
<li><code>top  right</code></li>
<li><code>center left</code>            </li>
<li><code>center  center</code>                   </li>
<li><code>center right</code></li>
<li><code>bottom left</code>           </li>
<li><code>bottom  center</code>    </li>
<li><code>ottom right</code></li>
</ul>
</li>
<li><code>background-positon</code>的数值取值     <ul>
<li><code>background-position:x  y;</code>  </li>
</ul>
</li>
<li><code>positon</code>的百分值取值     <ul>
<li><code>background-position:x%  y%;</code> </li>
</ul>
</li>
<li><p>背景图片的大小</p>
<ul>
<li>背景图片的大小可以通过属性<code>background-size</code>来设置<code>background-size</code>的取值可为数值和百分值。</li>
</ul>
</li>
<li><p><code>background-size</code>的数值取值     </p>
<ul>
<li><code>background-size:x  y;</code>  </li>
</ul>
</li>
<li><p><code>background-size</code>的数值取值     </p>
<ul>
<li><code>background-size:x%  y%;</code></li>
</ul>
</li>
<li><p>背景图片的滚动</p>
<ul>
<li><p>背景图片是否随着内容的滚动而滚动由<code>background-attachment</code>设置</p>
</li>
<li><p><code>background-attachment:fixed;</code>  固定，不随内容的滚动而滚动    </p>
</li>
<li><code>background-attachment:scroll;</code> 滚动，随内容的滚动而滚动</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h4 id="第十二章-文字文本属性"><a href="#第十二章-文字文本属性" class="headerlink" title="第十二章 文字文本属性"></a>第十二章 文字文本属性</h4><hr>
<ul>
<li><p><code>css</code>文字文本属性：</p>
<ul>
<li><p><strong>文字属性</strong></p>
<ul>
<li><code>color:red;</code>    文字颜色</li>
<li><code>font-size:12px</code>;    文字大小</li>
<li><code>font-weight:“bold”</code>    文字粗细(<code>bold/normal</code>)</li>
<li><code>font-family:“宋体”</code>    文字字体</li>
<li><code>font-variant:small-caps</code>小写字母以大写字母显示</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><p><strong>文本属性</strong></p>
<ul>
<li><code>text-align:center;</code>   文本对齐(<code>right</code>/<code>left</code>/<code>center</code>)</li>
<li><code>line-height:10px;</code> 行间距(可通过它实现文本的垂直居中)</li>
<li><code>text-indent:20px;</code>  首行缩进</li>
<li><code>text-decoration:none;</code> <ul>
<li>文本线(<code>none</code>/<code>underline</code>/<code>overline</code>/<code>line-through</code>)</li>
</ul>
</li>
<li><code>letter-spacing</code>:   字间距</li>
</ul>
</li>
</ul>
<hr>
<h4 id="第十三章-盒子模型"><a href="#第十三章-盒子模型" class="headerlink" title="第十三章 盒子模型"></a>第十三章 盒子模型</h4><hr>
<ul>
<li><strong>盒子模型</strong><ul>
<li>盒子模型就是一个有高度和宽度的矩形区域</li>
<li>所有<code>html</code>标签都是盒子模型</li>
<li><code>div</code>标签自定义盒子模型</li>
</ul>
</li>
<li><p>所有的标签都是盒子模型</p>
<ul>
<li><code>class</code>和<code>id</code>的主要差别是：<code>class</code>用于元素组（类似的元素，或者可以理解为某一类元素），而<code>id</code>用于标识单独的唯一的元素。</li>
</ul>
</li>
<li><p><strong>盒子模型的组成</strong></p>
<ul>
<li>盒子模型组成部分：<ul>
<li>自身内容：<code>width</code>、h<code>eight</code> 宽高</li>
<li>内边距：   <code>padding</code></li>
<li>盒子边框： <code>border</code> 边框线</li>
<li>与其他盒子距离：  <code>margin</code>外边距</li>
<li>内容+内边距+边框+外边距=面积</li>
</ul>
</li>
</ul>
</li>
<li><p><code>border</code> 边框</p>
<ul>
<li>常见写法  <code>border:1px solid #f00;</code></li>
</ul>
</li>
<li><p>单独属性：</p>
<ul>
<li><code>border-width</code>:</li>
<li><code>border-style:</code> <ul>
<li><code>dotted</code> 点状虚线</li>
<li><code>dashed</code>（虚线）</li>
<li><code>solid</code>（实线）</li>
<li><code>double</code>（双实线）</li>
</ul>
</li>
<li><code>border-color</code> (颜色)</li>
</ul>
</li>
<li><p><code>padding</code> 内边距</p>
<ul>
<li><p>值：<code>像素</code>/<code>厘米</code>等长度单位、百分比</p>
<ul>
<li><code>padding:10px;</code>                      上下左右</li>
<li><code>padding:10px 10px;</code>                 上下  左右</li>
<li><code>padding:10px 10px 10px;</code>         上 左右 下</li>
<li><code>padding:10px 10px 10px 10px;</code> 上 右 下 左（设置4个点–&gt;顺时针方向）</li>
</ul>
</li>
</ul>
</li>
<li><p>单独属性：</p>
<ul>
<li><code>padding-top:</code></li>
<li><code>padding-right:</code></li>
<li><code>padding-bottom:</code></li>
<li><code>padding-left:</code></li>
</ul>
</li>
<li><p>当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据<code>width</code>和<code>height</code>减小</p>
</li>
<li><p>margin 外边距</p>
<ul>
<li><p>值：与<code>padding</code>相同</p>
</li>
<li><p>单独属性：与<code>padding</code>相同</p>
</li>
</ul>
</li>
<li><p>外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并</p>
</li>
</ul>
<hr>
<p><strong>补充盒子模型内容</strong></p>
<hr>
<ul>
<li><p><strong>标准盒子模型</strong></p>
<ul>
<li>盒子模型是<code>css</code>中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 <code>ie</code>盒子模型和标准 <code>w3c</code> 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型</li>
</ul>
</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-320bad065d62c499.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<ul>
<li><p>从上图可以看到标准 <code>w3c</code> 盒子模型的范围包括 <code>margin</code>、<code>border</code>、<code>padding</code>、<code>content</code>，并且 <code>content</code>部分不包含其他部分</p>
</li>
<li><p><strong> IE盒子模型</strong></p>
</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-693242e2f03506f8.JPG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<ul>
<li>从上图可以看到 <code>ie</code>盒子模型的范围也包括 <code>margin</code>、<code>border</code>、<code>padding</code>、<code>content</code></li>
<li><p>和标准 <code>w3c</code> 盒子模型不同的是：<code>ie</code> 盒子模型的 <code>content</code> 部分包含了 <code>border</code>和 <code>padding</code></p>
</li>
<li><p><code>IE</code>盒子模型<code>width</code> = <code>padding</code>+<code>border</code>+<code>内容</code></p>
</li>
<li><p>标准盒子模型 = 内容的宽度（不包含<code>border</code>+<code>padding</code>）</p>
</li>
<li><p>例：</p>
<ul>
<li>一个盒子的   <code>margin</code>为 20px，<code>border</code> 为 1px，<code>padding</code>为 10px，<code>content</code> 的宽为 200px、高为 50px，假如用标准 <code>w3c</code> 盒子模型解释，那么这个盒子需要占据的位置为：宽 <code>20*2+1*2+10*2+200=262px</code>、高 <code>20*2+1*2*10*2+50=112px</code>，盒子的实际大小为：宽 <code>1*2+10*2+200=222px</code>、高 <code>1*2+10*2+50=72px</code>；假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 <code>20*2+200=240px</code>、高 <code>20*2+50=70px</code>，盒子的实际大小为：宽 <code>200px</code>、高 <code>50px</code></li>
</ul>
</li>
<li><p>那应该选择哪中盒子模型呢？当然是“标准 <code>w3c</code> 盒子模型”了。怎么样才算是选择了“标准 <code>w3c</code>盒子模型”呢？很简单，就是在网页的顶部加上 <code>doctype</code> 声明。</p>
</li>
<li>假如不加<code>doctype</code> 声明，那么各个浏览器会根据自己的行为去理解网页，即 <code>ie</code>浏览器会采用 <code>ie</code> 盒子模型去解释你的盒子，而 <code>ff</code>会采用标准<code>w3c</code> 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。</li>
<li>反之，假如加上了 <code>doctype</code> 声明，那么所有浏览器都会采用标准 <code>w3c</code>盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。</li>
</ul>
<hr>
<ul>
<li>用 <code>jquery</code> 做的例子来证实一下</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;title&gt;你用的盒子模型是？&lt;/title&gt;</span><br><span class="line">&lt;script language=&quot;javascript&quot; src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;script language=&quot;javascript&quot;&gt;</span><br><span class="line">var sbox = $.boxmodel ? &quot;标准w3c&quot;:&quot;ie&quot;;</span><br><span class="line">document.write(&quot;您的页面目前支持：&quot;+sbox+&quot;盒子模型&quot;);</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>　上面的代码没有加上 <code>doctype</code> 声明，在 <code>ie</code> 浏览器中显示  <code>ie</code>盒子模型，在 ff 浏览器中显示“标准<code>w3c</code> 盒子模型”。</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!doctype html public &quot;-//w3c//dtd xhtml 1.0 transitional//en&quot; &quot;http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd&quot;&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;title&gt;你用的盒子模型是标准w3c盒子模型&lt;/title&gt;</span><br><span class="line">&lt;script language=&quot;javascript&quot; src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;script language=&quot;javascript&quot;&gt;</span><br><span class="line">var sbox = $.boxmodel ? &quot;标准w3c&quot;:&quot;ie&quot;;</span><br><span class="line">document.write(&quot;您的页面目前支持：&quot;+sbox+&quot;盒子模型&quot;);</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>　代码2 与代码1 唯一的不同的就是顶部加了 <code>doctype</code>声明。在所有浏览器中都显示“标准 <code>w3c</code>盒子模型”</li>
</ul>
<ul>
<li><p>所以为了让网页能兼容各个浏览器，让我们用标准 <code>w3c</code> 盒子模型</p>
</li>
<li><p>扩展</p>
<ul>
<li><a href="http://www.jianshu.com/p/e2eb0d8c9de6" target="_blank" rel="noopener">学会使用box-sizing布局</a></li>
</ul>
</li>
</ul>
<hr>
<h4 id="第十四章-块元素、行元素与溢出"><a href="#第十四章-块元素、行元素与溢出" class="headerlink" title="第十四章 块元素、行元素与溢出"></a>第十四章 块元素、行元素与溢出</h4><hr>
<ul>
<li>基本概念<ul>
<li>块级元素：默认情况下独占一行的元素，可控制宽高、上下边距；</li>
<li>行内元素：默认情况下一行可以摆放多个的元素，不可控制宽高和上下边距</li>
</ul>
</li>
<li><p>行块转换</p>
<ul>
<li><code>display:none</code>;  不显示</li>
<li><code>display:block</code>; 变成块级元素</li>
<li><code>display:inline</code>; 变成行级元素</li>
<li><code>display:inline-block</code>; 以块级元素样式展示，以行级元素样式排列</li>
</ul>
</li>
<li><p>溢出</p>
<ul>
<li><code>overflow:hidden</code>;   溢出隐藏</li>
<li><code>overflow:scroll</code>;   内容会被修剪，浏览器会显示滚动条</li>
<li><code>overflow:auto</code>;   如果内容被修剪，则产生滚动条</li>
</ul>
</li>
<li><p>文本不换行：<code>white-space:nowrap</code>;</p>
</li>
<li>长单词换行：<code>word-wrap:break-word</code>;</li>
</ul>
<ul>
<li><p>行内元素和快级元素小结</p>
<ul>
<li><p>一、<strong>块级元素</strong>：block element</p>
<ul>
<li>每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（<code>float</code>浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；</li>
<li><p>块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素。</p>
</li>
<li><p><code>DIV</code> 是最常用的块级元素，元素样式的<code>display:block</code>都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。</p>
</li>
</ul>
</li>
<li><p>二、<strong>行内元素</strong>：inline element</p>
<ul>
<li>也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 <code>SPAN</code>元素，<code>IFRAME</code>元素和元素样式的<code>display : inline</code>的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。</li>
</ul>
</li>
<li><p>三、<strong>block（块）元素的特点:</strong></p>
<ul>
<li>①、总是在新行上开始；</li>
<li>②、高度，行高以及外边距和内边距都可控制；</li>
<li>③、宽度缺省是它的容器的100%，除非设定一个宽度。</li>
<li>④、它可以容纳内联元素和其他块元素</li>
</ul>
</li>
<li><p>四、<strong>inline元素的特点</strong></p>
<ul>
<li>①、和其他元素都在一行上；</li>
<li>②、高，行高及外边距和内边距不可改变；</li>
<li>③、宽度就是它的文字或图片的宽度，不可改变</li>
<li>④、内联元素只能容纳文本或者其他内联元素</li>
</ul>
</li>
<li><p><strong>对行内元素，需要注意如下</strong>:</p>
<ul>
<li>设置宽度<code>width</code> 无效。 设置高度<code>height</code>无效，可以通过<code>line-height</code>来设置。 设置<code>margin</code></li>
<li>只有左右<code>margin</code>有效，上下无效。</li>
<li>设置<code>padding</code>只有左右<code>padding</code>有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。</li>
</ul>
</li>
<li><p>五、<strong>常见的块状元素</strong></p>
<ul>
<li><code>address</code> – 地址</li>
<li><code>blockquote</code> – 块引用</li>
<li><code>center</code> – 举中对齐块</li>
<li><code>dir</code> – 目录列表</li>
<li><code>div</code> – 常用块级容易，也是<code>CSS layout</code>的主要标签</li>
<li><code>dl</code> – 定义列表</li>
<li><code>fieldset</code> – <code>form</code>控制组</li>
<li><code>form</code> – 交互表单</li>
<li><code>h1</code> – 大标题</li>
<li><code>h2</code> – 副标题</li>
<li><code>h3</code> – 3级标题</li>
<li><code>h4</code> – 4级标题</li>
<li><code>h5</code> – 5级标题</li>
<li><code>h6</code> – 6级标题</li>
<li><code>hr</code> – 水平分隔线</li>
<li><code>isindex</code> – <code>input prompt</code></li>
<li><code>menu</code> – 菜单列表</li>
<li><code>noframes</code> – <code>frames</code>可选内容，（对于不支持frame的浏览器显示此区块内容</li>
<li><code>noscript</code> – 可选脚本内容（对于不支持<code>script</code>的浏览器显示此内容）</li>
<li><code>ol</code> – 有序表单</li>
<li><code>p</code> – 段落</li>
<li><code>pre</code> – 格式化文本</li>
<li><code>table</code> – 表格</li>
<li><code>ul</code> – 无序列表</li>
</ul>
</li>
<li><p>六、<strong>常见的内联元素</strong></p>
<ul>
<li><code>a</code> – 锚点</li>
<li><code>abbr</code> – 缩写</li>
<li><code>acronym</code> – 首字</li>
<li><code>b</code> – 粗体(不推荐)</li>
<li><code>bdo</code> – <code>bidi override</code></li>
<li><code>big</code> – 大字体</li>
<li><code>br</code> – 换行</li>
<li><code>cite</code> – 引用</li>
<li><code>code</code> – 计算机代码(在引用源码的时候需要)</li>
<li><code>dfn</code> – 定义字段</li>
<li><code>em</code> – 强调</li>
<li><code>font</code> – 字体设定(不推荐)</li>
<li><code>i</code> – 斜体</li>
<li><code>img</code> – 图片</li>
<li><code>input</code> – 输入框</li>
<li><code>kbd</code> – 定义键盘文本</li>
<li><code>label</code> – 表格标签</li>
<li><code>q</code> – 短引用</li>
<li><code>s</code> – 中划线(不推荐)</li>
<li><code>samp</code> – 定义范例计算机代码</li>
<li><code>select</code> – 项目选择</li>
<li><code>small</code> – 小字体文本</li>
<li><code>span</code> – 常用内联容器，定义文本内区块</li>
<li><code>strike</code> – 中划线</li>
<li><code>strong</code> – 粗体强调</li>
<li><code>sub</code> – 下标</li>
<li><code>sup</code> – 上标</li>
<li><code>textarea</code> – 多行文本输入框</li>
<li><code>tt</code> – 电传文本</li>
<li><code>u</code> – 下划线</li>
</ul>
</li>
<li><p>七，<strong>可变元素</strong></p>
<ul>
<li>可变元素为根据上下文语境决定该元素为块元素或者内联元素。</li>
<li><code>applet</code> - <code>java applet</code></li>
<li><code>button</code> - 按钮</li>
<li><code>del</code>- 删除文本</li>
<li><code>iframe</code> - <code>inline frame</code></li>
<li><code>ins</code> - 插入的文本</li>
<li><code>map</code> - 图片区块(<code>map</code>)</li>
<li><code>object</code> - <code>object</code>对象</li>
<li><code>script</code> - 客户端脚本</li>
</ul>
</li>
<li><p>八、<strong>行内元素与块级元素有什么不同</strong></p>
<ul>
<li><p>区别一：</p>
<ul>
<li>块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度</li>
<li>行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。</li>
</ul>
</li>
<li><p>区别二：</p>
<ul>
<li>块级：块级元素可以设置宽高</li>
<li>行内：行内元素不可以设置宽高</li>
</ul>
</li>
<li><p>区别三：</p>
<ul>
<li>块级：块级元素可以设置<code>margin</code>，<code>padding</code></li>
<li>行内：行内元素水平方向的<code>margin-left;</code> <code>margin-right;</code></li>
</ul>
</li>
<li><p><code>padding-left;</code> <code>padding-right</code>;可以生效。但是竖直方向的<code>margin-bottom</code>; <code>margin-top</code>; <code>padding-top</code>; <code>padding-bottom</code>;却不能生效。</p>
</li>
<li><p>区别四：</p>
<ul>
<li>块级：<code>display:block</code>;</li>
<li>行内：<code>display:inline</code>;</li>
</ul>
</li>
</ul>
</li>
<li><p>替换元素有如下：（和<code>img</code>一样的设置方法）</p>
<ul>
<li><code>&lt;img&gt;</code>、<code>&lt;input&gt;</code>、<code>&lt;textarea&gt;</code>、<code>&lt;select&gt;</code></li>
<li><code>&lt;object&gt;</code>都是替换元素，这些元素都没有实际的内容</li>
</ul>
</li>
</ul>
</li>
<li>可以通过修改<code>display</code>属性来切换块级元素和行内元素</li>
</ul>
<hr>
<h4 id="第十五章-定位"><a href="#第十五章-定位" class="headerlink" title="第十五章 定位"></a>第十五章 定位</h4><hr>
<ul>
<li><p><code>static</code>静态定位（不对它的位置进行改变，在哪里就在那里）</p>
<ul>
<li>默认值。没有定位，元素出现在正常的流中（忽略 <code>top</code>,<code>bottom,</code>  <code>left, right</code> 或者 <code>z-index</code> 声明）。</li>
</ul>
</li>
<li><p><code>fixed</code>固定定位（参照物–浏览器窗口）—做 弹窗广告用到</p>
<ul>
<li>生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 <code>&quot;left&quot;</code>, <code>&quot;top&quot;</code>, <code>&quot;right&quot;</code>以及 <code>&quot;bottom&quot;</code>属性进行规定。 </li>
</ul>
</li>
<li><p><code>relative</code>（相对定位 ）（参照物以他本身）</p>
<ul>
<li>生成相对定位的元素，相对于其正常位置进行定位。</li>
</ul>
</li>
<li><p><code>absolute</code>（绝对定位）(除了<code>static</code>都可以，找到参照物–&gt;与它最近的已经有定位的父元素进行定位)</p>
<ul>
<li>生成绝对定位的元素，相对于 <code>static</code> 定位以外的第一个父元素进行定位。</li>
<li>元素的位置通过 “<code>left&quot;</code>, <code>&quot;top&quot;</code>, <code>&quot;right&quot;</code> 以及 <code>&quot;bottom&quot;</code> 属性进行规定</li>
</ul>
</li>
<li><p>z-index</p>
<ul>
<li><code>z-index</code> 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。</li>
<li>定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。</li>
</ul>
</li>
<li><p>一切皆为框</p>
<ul>
<li>块级元素: <code>div</code>、<code>h1</code>或<code>p</code>元素 即：显示为一块内容称之为 “块框“ ;</li>
<li>行内元素: <code>span</code>,<code>strong</code>,<code>a</code>等元素 即：内容显示在行中称 “行内框”;</li>
<li>使用display属性改变成框的类型 即：<code>display:block</code>; 让行内元素设置为块级元素，<code>display:none;</code> 没有框</li>
</ul>
</li>
<li><p>相对定位：</p>
<ul>
<li>如果对一个元素进行相对定位，它将出现在它所在的位置上。 </li>
<li>通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动</li>
<li><code>.adv_relative {  position: relative;  left: 30px;  top: 20px; }</code></li>
</ul>
</li>
<li><p>绝对定位：</p>
<ul>
<li>元素的位置相对于最近的已定位祖先元素，如果元素没有已定位 的祖先元素，它的位置相对于最初的包含块。 <code>.adv_absolute {  position: absolute;  left: 30px;  top: 20px; }</code></li>
</ul>
</li>
</ul>
<hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-f72c1c8486445df1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt><br><img src="http://upload-images.jianshu.io/upload_images/1480597-7ab9cda0bbd7e62f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<hr>
<h4 id="第十六章-框架"><a href="#第十六章-框架" class="headerlink" title="第十六章 框架"></a>第十六章 框架</h4><hr>
<ul>
<li><code>frameset</code>框架：<ul>
<li><code>&lt;frameset&gt;</code> —-  用来定义一个框架；双标签<br>不能和  <code>&lt;body&gt;</code>  一起使用</li>
</ul>
</li>
<li><p><code>rows</code>、<code>cols</code>属性</p>
<ul>
<li><code>rows</code> 定义行表示框架有多少行（取值 <code>px</code>/<code>%</code>/ <code>*</code> ）</li>
<li><code>cols</code>   定义列表示框架有多少列（取值<code>px</code>/ <code>%</code>/ <code>*</code> ）</li>
</ul>
</li>
<li><p>frame子框架</p>
<ul>
<li><p>&lt;<code>frame</code>&gt;  —-  表示框架中的某一个部分；单标签，要跟结束标志</p>
<ul>
<li><code>src</code> 显示的网页的路径</li>
<li><code>name</code> 框架名</li>
<li><code>frameborder</code>  边框线（取值 0 / 1）</li>
</ul>
</li>
<li><p>&lt;<code>noframes</code>&gt;属性</p>
</li>
<li><p>&lt;<code>noframes</code>&gt; 提供不支持框架的浏览器显示<code>body</code>的内容；双标签</p>
</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;frameset&gt;</span><br><span class="line">     &lt;frame  src=“”  /&gt;</span><br><span class="line">     &lt;frame  src=“” /&gt;</span><br><span class="line">     &lt;frame  src=“” /&gt;</span><br><span class="line">     &lt;noframes&gt;</span><br><span class="line">      &lt;body&gt;内容&lt;/body&gt;</span><br><span class="line">     &lt;/noframes&gt;</span><br><span class="line">&lt;/frameset&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li><code>&lt;iframe&gt;</code>内联框架<ul>
<li><code>iframe</code>元素会创建包含另外一个文档的内联框架（即行内框架）</li>
<li>允许和 <code>body</code> 一起使用</li>
<li><code>width</code> 宽（取值 px / %）</li>
<li><code>height</code> 高（取值 px / %）</li>
<li><code>name</code> 框架名</li>
<li><code>frameborder</code> 边框线（取值 0 / 1）</li>
<li><code>src</code> 显示的网页的路径</li>
</ul>
</li>
</ul>
<hr>
<h4 id="第十七章-css高级属性"><a href="#第十七章-css高级属性" class="headerlink" title="第十七章 css高级属性"></a>第十七章 css高级属性</h4><hr>
<ul>
<li><code>opacity</code>透明属性<ul>
<li><code>opacity</code><ul>
<li>对于<code>IE6/7/</code>，使用<code>filter:alpha(opacity:值;</code>)  值为<code>0-100</code></li>
<li>对于<code>Webkit</code>，<code>Opera</code>，<code>Firefox</code>，<code>IE9+</code>，使用<code>opacity</code>:值; 值为<code>0-1</code></li>
<li>对于早期火狐，使用<code>-moz-opacity</code>:值; 值为<code>0-1</code></li>
<li>所以写透明属性时，一般写法是</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"> &#123;	</span><br><span class="line">    opacity:0.5;</span><br><span class="line">   filter:alpha(opacity：50);/*0-100*/</span><br><span class="line">   -moz-opacity:0.5;	/*取值0-1*/--&gt;针对早起版本的火狐兼容问题的解决</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>border-radius</code>圆角边框属性</p>
<ul>
<li>向 <code>div</code> 元素添加圆角边框<ul>
<li><code>border-radius:10px</code>;</li>
</ul>
</li>
</ul>
</li>
<li><p><code>box-shadow</code>阴影属性</p>
<ul>
<li><p><code>box-shadow</code>属性向框添加阴影效果,后面跟4个参数。</p>
</li>
<li><p><code>box-shadow:0px   0px   10px   #000;</code></p>
</li>
</ul>
</li>
<li><p><code>&lt;embed&gt;</code>属性</p>
<ul>
<li><p>是<code>HTML5</code>中新增的标签,媒体嵌入插件标签，可以通过<code>&lt;embed&gt;</code>插入音频或视频</p>
</li>
<li><p><code>&lt;embed src=“media/music.mp3” /&gt;</code></p>
</li>
<li><p>格式<code>.mid</code> <code>.wav</code> <code>.mp3</code>等</p>
</li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><strong>CSS部分导图总结</strong></li>
</ul>
<hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-4b55b5085a7d0c56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<hr>
<ul>
<li><a href="https://yunpan.cn/cM9va2bHD4wwu" target="_blank" rel="noopener">原文件下载地址</a>   访问密码 342a</li>
</ul>
<hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-a893d4023c39c78a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<hr>
<ul>
<li><code>css</code>常见简写</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-cbce5ef927ab2589.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="css简写速查"></p>
<hr>
<h3 id="第三部分-附录"><a href="#第三部分-附录" class="headerlink" title="第三部分 附录"></a>第三部分 附录</h3><hr>
<h4 id="附录一-DIV命名规范"><a href="#附录一-DIV命名规范" class="headerlink" title="附录一 DIV命名规范"></a>附录一 DIV命名规范</h4><hr>
<ul>
<li><p>企业<code>DIV</code>使用频率高的命名方法</p>
</li>
<li><p><strong>网页内容类</strong></p>
<ul>
<li><p>标题: <code>title</code></p>
<ul>
<li>摘要: <code>summary</code></li>
<li>箭头： <code>arrow</code></li>
<li>商标： <code>label</code></li>
<li>网站标志： <code>logo</code></li>
<li>转角/圆角：<code>corner</code></li>
<li>横幅广告： <code>banner</code></li>
<li>子菜单： <code>subMenu</code></li>
<li>搜索： <code>search</code></li>
<li>搜索框： <code>searchBox</code></li>
<li>登录： <code>login</code></li>
<li>登录条：<code>loginbar</code></li>
<li>工具条： <code>toolbar</code></li>
<li>下拉： <code>drop</code></li>
<li>标签页： <code>tab</code></li>
<li>当前的： <code>current</code></li>
<li>列表： <code>list</code></li>
<li>滚动： <code>scroll</code></li>
<li>服务： <code>service</code></li>
<li>提示信息： <code>msg</code></li>
<li>热点：<code>hot</code></li>
<li>新闻： <code>news</code></li>
<li>小技巧： <code>tips</code></li>
<li>下载： <code>download</code></li>
<li>栏目标题： <code>title</code></li>
<li>热点： <code>hot</code></li>
<li>加入：<code>joinus</code></li>
<li>注册： <code>regsiter</code></li>
<li>指南： <code>guide</code></li>
<li>友情链接： <code>friendlink</code></li>
<li>状态： <code>status</code></li>
<li>版权： <code>copyright</code></li>
<li>按钮： <code>btn</code></li>
<li>合作伙伴： <code>partner</code></li>
<li>投票： <code>vote</code></li>
<li>左右中：<code>left</code>  <code>right</code>  <code>center</code></li>
</ul>
<hr>
</li>
<li>注释的写法: <code>/* Footer */</code> 内容区<code>/* End Footer */</code></li>
</ul>
</li>
<li><p><strong>id的命名:</strong></p>
<ul>
<li><p>页面结构</p>
<ul>
<li>容器: <code>container</code></li>
<li>页头：<code>header</code></li>
<li>内容：<code>content</code>/<code>container</code></li>
<li>页面主体：<code>main</code></li>
<li>页尾：<code>footer</code></li>
<li>导航：<code>nav</code></li>
<li>侧栏：<code>sidebar</code></li>
<li>栏目：<code>column</code></li>
<li>页面外围控制整体布局宽度：<code>wrapper</code></li>
<li>左右中：<code>left</code> <code>right</code> <code>center</code></li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><p>导航</p>
<ul>
<li>导航：<code>nav</code></li>
<li>主导航：<code>mainbav</code></li>
<li>子导航：<code>subnav</code></li>
<li>顶导航：<code>topnav</code></li>
<li>边导航：<code>sidebar</code></li>
<li>左导航：<code>leftsidebar</code></li>
<li>右导航：<code>rightsidebar</code></li>
<li>菜单：<code>menu</code></li>
<li>子菜单：<code>submenu</code></li>
<li>标题: <code>title</code></li>
<li>摘要: <code>summary</code></li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><p>功能</p>
<ul>
<li>标志：<code>logo</code></li>
<li>广告：<code>banner</code></li>
<li>登陆：<code>login</code></li>
<li>登录条：<code>loginbar</code></li>
<li>注册：<code>regsiter</code></li>
<li>搜索：<code>search</code></li>
<li>功能区：<code>shop</code></li>
<li>标题：<code>title</code></li>
<li>加入：<code>joinus</code></li>
<li>状态：<code>status</code></li>
<li>按钮：<code>btn</code></li>
<li>滚动：<code>scroll</code></li>
<li>标签页：<code>tab</code></li>
<li>文章列表：<code>list</code></li>
<li>提示信息：<code>msg</code></li>
<li>当前的:<code>current</code></li>
<li>小技巧：<code>tips</code></li>
<li>图标: <code>icon</code></li>
<li>注释：<code>note</code></li>
<li>指南：<code>guild</code></li>
<li>服务：<code>service</code></li>
<li>热点：<code>hot</code></li>
<li>新闻：<code>news</code></li>
<li>下载：<code>download</code></li>
<li>投票：<code>vote</code></li>
<li>合作伙伴：<code>partner</code></li>
<li>友情链接：<code>link</code></li>
<li>版权：<code>copyright</code></li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><p><strong><code>class</code>的命名:</strong></p>
<ul>
<li><p>颜色:使用颜色的名称或者16进制代码,如</p>
<ul>
<li><code>.red { color: red; }</code></li>
<li><code>.f60 { color: #f60; }</code></li>
<li><code>.ff8600 { color: #ff8600; }</code></li>
</ul>
</li>
<li><p>字体大小,直接使用”font+字体大小”作为名称,如</p>
<ul>
<li><code>.font12px { font-size: 12px; }</code></li>
<li><code>.font9px {font-size: 9pt; }</code></li>
</ul>
</li>
<li><p>对齐样式,使用对齐目标的英文名称,如</p>
<ul>
<li><code>.left { float:left; }</code></li>
<li><code>.bottom { float:bottom; }</code></li>
</ul>
</li>
<li><p>标题栏样式,使用”类别+功能”的方式命名,如</p>
<ul>
<li><code>.barnews { }</code></li>
<li><code>.barproduct { }</code></li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><p><strong>注意事项::</strong></p>
<ul>
<li>一律小写;</li>
<li>尽量用英文;</li>
<li>不加中杠和下划线;</li>
<li>尽量不缩写，除非一看就明白的单词.</li>
</ul>
</li>
</ul>
<hr>
</li>
</ul>
</li>
<li><p><strong>推荐的 <code>CSS</code> 书写顺序：</strong></p>
<ul>
<li><p>显示属性</p>
<ul>
<li><code>display</code></li>
<li><code>list-style</code></li>
<li><code>position</code></li>
<li><code>float</code></li>
<li><code>clear</code></li>
</ul>
</li>
<li><p>自身属性</p>
<ul>
<li><code>width</code></li>
<li><code>height</code></li>
<li><code>margin</code></li>
<li><code>padding</code></li>
<li><code>border</code></li>
<li><code>background</code></li>
</ul>
</li>
<li><p>文本属性</p>
<ul>
<li><code>color</code></li>
<li><code>font</code></li>
<li><code>text-decoration</code></li>
<li><code>text-align</code></li>
<li><code>vertical-align</code></li>
<li><code>white-space</code></li>
<li><code>other text</code></li>
<li><code>content</code>    </li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h4 id="附录二-CSS精灵"><a href="#附录二-CSS精灵" class="headerlink" title="附录二 CSS精灵"></a>附录二 CSS精灵</h4><hr>
<ul>
<li><strong>CSS精灵原理以及应用</strong><ul>
<li><code>CSS</code>雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。<ul>
<li>该图片使用<code>CSS</code>   <code>background和background-position</code>属性渲染，这也就意味着你的标签变得更加复杂了，图片是在<code>CSS</code>中定义，而非<code>&lt;img&gt;</code>标签。</li>
</ul>
</li>
</ul>
</li>
<li><strong>一个简单的例子</strong>：<ul>
<li>一张图片作出一个按钮的三个状态</li>
<li>一个链接用<code>CSS</code>做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，<code>a:link</code>，<code>a:hover</code>，<code>a:active</code> <code>&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;链接&lt;/a&gt;</code></li>
<li>加入右侧的图片为：<code>200px 65px</code>的三个按钮图拼合而成的图片<code>button.png</code>，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用<code>CSS</code>进行定义。</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">a &#123;</span><br><span class="line">    display:block; </span><br><span class="line">    width:200px; </span><br><span class="line">    height:65px; </span><br><span class="line">    line-height:65px; /*定义状态*/</span><br><span class="line">    text-indent:-2015px; /*隐藏文字*/</span><br><span class="line">    background-image:url(button.png); /*定义背景图片*/</span><br><span class="line">    background-position:0 0;</span><br><span class="line">    /*定义链接的普通状态，此时图像显示的是顶上的部分*/</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">a:hover &#123;</span><br><span class="line">    background-position:0 -66px;</span><br><span class="line">    /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/</span><br><span class="line">&#125;</span><br><span class="line">a:active &#123;</span><br><span class="line">    background-position:0 -132px;                      </span><br><span class="line">    /*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>更多的<code>CSS</code>雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值<ul>
<li>如：<code>background:url(nav.png) -180px 24pxno-repeat</code>; 来达到更精确的定位</li>
</ul>
</li>
<li><strong>优点：</strong><ul>
<li>减少加载网页图片时对服务器的请求次数</li>
<li>可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。</li>
<li>提高页面的加载速度</li>
<li><code>sprite</code>技术的其中一个好处是图片的加载时间(在有许多 <code>sprite</code> 时，单张图片的加载时间)。由所需图片拼成的一张 <code>GIF</code>图片的尺寸会明显小于所有图片拼合前的大小。单张的 <code>GIF</code>只有相关的一个色表，而单独分割的每一张 <code>GIF</code> 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 <code>JPEG</code> 或者 <code>PNG</code> <code>sprite</code> 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。</li>
<li>减少鼠标滑过的一些<code>bug</code></li>
<li><code>IE6</code>不会主动预加载鼠标滑过即<code>a:hover</code>中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用<code>CSS</code>雪碧，由于一张图片即可，所以不会出现这种现象。</li>
</ul>
</li>
<li><strong>不足：</strong><ul>
<li><code>CSS</code>雪碧的最大问题是内存使用</li>
<li>影响浏览器的缩放功能</li>
<li>拼图维护比较麻烦</li>
<li>使<code>CSS</code>的编写变得困难</li>
<li><code>CSS</code> 雪碧调用的图片不能被打印</li>
<li>错误得使用 <code>Sprites</code> 影响可访问性</li>
</ul>
</li>
</ul>
<h4 id="附录三-一些tips解决方案"><a href="#附录三-一些tips解决方案" class="headerlink" title="附录三 一些tips解决方案"></a>附录三 一些tips解决方案</h4><hr>
<h5 id="页面优化实践"><a href="#页面优化实践" class="headerlink" title="页面优化实践"></a>页面优化实践</h5><hr>
<ul>
<li><p>从下面的几个方面可以进行页面的优化：</p>
<ul>
<li>减少请求数</li>
<li>图片合并</li>
<li><code>CSS</code>文件合并</li>
<li>减少内联样式</li>
<li>避免在 <code>CSS</code>中使用 <code>import</code></li>
<li>减少文件大小</li>
<li>选择适合的图片格式</li>
<li>图片压缩</li>
<li><code>CSS</code> 值缩写（<code>Shorthand Property</code>)</li>
<li>文件压缩</li>
<li>页面性能</li>
<li>调整文件加载顺序</li>
<li>减少标签数量</li>
<li>调整选择器长度</li>
<li>尽量使用<code>CSS</code> 制作显示表现</li>
<li>增强代码可读性与可维护性</li>
<li>规范化</li>
<li>语义化</li>
<li>模块化</li>
</ul>
</li>
</ul>
<h5 id="写DIV-CSS-的一些常识"><a href="#写DIV-CSS-的一些常识" class="headerlink" title="写DIV+CSS 的一些常识"></a>写DIV+CSS 的一些常识</h5><hr>
<ul>
<li><p>不要使用过小的图片做背景平铺</p>
<ul>
<li>这就是为何很多人都不用 <code>1px</code> 的原因，这才知晓。宽高 <code>1px</code> 的图片平铺出一个宽高 <code>200px</code> 的区域，需要 <code>200200=40, 000</code> 次，占用资源</li>
</ul>
</li>
<li><p>无边框</p>
<ul>
<li>推荐的写法是 <code>border:none</code>;，哈哈，我一直在用这个。 <code>border:0;</code> 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源</li>
</ul>
</li>
<li><p>慎用 通配符</p>
<ul>
<li>所谓通配符，就是将<code>CSS</code> 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。</li>
</ul>
</li>
<li><p><code>CSS</code>的十六进制颜色代码缩写</p>
<ul>
<li>习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。</li>
</ul>
</li>
<li><p>样式放头上，脚本放脚下。不内嵌，只外链</p>
</li>
<li><p>坚决不用 <code>CSS</code>表达式</p>
</li>
<li><p>使用 引用样式表，而不是通过<code>@import</code> 导入。</p>
</li>
<li><p>一般来说，<code>PNG</code>比 <code>GIF</code> 要小，小得多。再者，<code>GIF</code> 中有多少颜色是被浪费的，很值得优化。</p>
</li>
<li><p>千万不要在 <code>HTML</code>中缩放图片，一者不好看，二者占资源。</p>
</li>
<li><p>正文字体最好用偶数</p>
<ul>
<li><code>12px</code>、<code>14px</code>、<code>16px</code>，效果非常好。特例，<code>15px</code>。</li>
</ul>
</li>
<li><p><code>block</code>、<code>ul</code>、<code>ol</code>等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。</p>
</li>
<li><p>段落之间，至少要有一倍行距</p>
</li>
<li><p>强行指定某些元素的 <code>line-height</code>，正文 <code>1.6</code>倍于文字大小，标题<code>1.3</code>倍。</p>
</li>
<li><p>中文标点用全角</p>
<ul>
<li>英文夹杂在中文中，左右空格，半角。</li>
</ul>
</li>
<li><p>中文字体的粗体和斜体，远离较好</p>
</li>
</ul>
<h5 id="常用代码片段"><a href="#常用代码片段" class="headerlink" title="常用代码片段"></a>常用代码片段</h5><hr>
<ul>
<li>雅虎工程师提供的<code>CSS</code>初始化示例代码【仅供参考】<ul>
<li>可以在<code>html</code>头文件中直接引用，从而避免浏览器的不兼容带来的错误。</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">body</span>,</span><br><span class="line"><span class="selector-tag">div</span>,</span><br><span class="line"><span class="selector-tag">dl</span>,</span><br><span class="line"><span class="selector-tag">dt</span>,</span><br><span class="line"><span class="selector-tag">dd</span>,</span><br><span class="line"><span class="selector-tag">ul</span>,</span><br><span class="line"><span class="selector-tag">ol</span>,</span><br><span class="line"><span class="selector-tag">li</span>,</span><br><span class="line"><span class="selector-tag">h1</span>,</span><br><span class="line"><span class="selector-tag">h2</span>,</span><br><span class="line"><span class="selector-tag">h3</span>,</span><br><span class="line"><span class="selector-tag">h4</span>,</span><br><span class="line"><span class="selector-tag">h5</span>,</span><br><span class="line"><span class="selector-tag">h6</span>,</span><br><span class="line"><span class="selector-tag">pre</span>,</span><br><span class="line"><span class="selector-tag">code</span>,</span><br><span class="line"><span class="selector-tag">form</span>,</span><br><span class="line"><span class="selector-tag">fieldset</span>,</span><br><span class="line"><span class="selector-tag">legend</span>,</span><br><span class="line"><span class="selector-tag">input</span>,</span><br><span class="line"><span class="selector-tag">button</span>,</span><br><span class="line"><span class="selector-tag">textarea</span>,</span><br><span class="line"><span class="selector-tag">p</span>,</span><br><span class="line"><span class="selector-tag">blockquote</span>,</span><br><span class="line"><span class="selector-tag">th</span>,</span><br><span class="line"><span class="selector-tag">td</span> &#123; </span><br><span class="line">    <span class="attribute">margin</span>:<span class="number">0</span>; <span class="attribute">padding</span>:<span class="number">0</span>; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>:<span class="number">#fff</span>; </span><br><span class="line">    <span class="attribute">color</span>:<span class="number">#555</span>; </span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">14px</span>; </span><br><span class="line">    <span class="attribute">font-family</span>: Verdana, Arial, Helvetica, sans-serif; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">td</span>,</span><br><span class="line"><span class="selector-tag">th</span>,</span><br><span class="line"><span class="selector-tag">caption</span> &#123; </span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">14px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">h1</span>, </span><br><span class="line"><span class="selector-tag">h2</span>, </span><br><span class="line"><span class="selector-tag">h3</span>, </span><br><span class="line"><span class="selector-tag">h4</span>, </span><br><span class="line"><span class="selector-tag">h5</span>, </span><br><span class="line"><span class="selector-tag">h6</span> &#123; </span><br><span class="line">    <span class="attribute">font-weight</span>:normal; </span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">100%</span>; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">address</span>, </span><br><span class="line"><span class="selector-tag">caption</span>,</span><br><span class="line"><span class="selector-tag">cite</span>, </span><br><span class="line"><span class="selector-tag">code</span>, </span><br><span class="line"><span class="selector-tag">dfn</span>, </span><br><span class="line"><span class="selector-tag">em</span>, </span><br><span class="line"><span class="selector-tag">strong</span>,</span><br><span class="line"><span class="selector-tag">th</span>, </span><br><span class="line"><span class="selector-tag">var</span> &#123; </span><br><span class="line">    <span class="attribute">font-style</span>:normal; </span><br><span class="line">    <span class="attribute">font-weight</span>:normal;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span> &#123; </span><br><span class="line">    <span class="attribute">color</span>:<span class="number">#555</span>; </span><br><span class="line">    <span class="attribute">text-decoration</span>:none; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123; </span><br><span class="line">    <span class="attribute">text-decoration</span>:underline; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>:none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ol</span>,<span class="selector-tag">ul</span>,<span class="selector-tag">li</span> &#123; </span><br><span class="line">    <span class="attribute">list-style</span>:none; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span>, </span><br><span class="line"><span class="selector-tag">textarea</span>, </span><br><span class="line"><span class="selector-tag">select</span>, </span><br><span class="line"><span class="selector-tag">button</span> &#123; </span><br><span class="line">    <span class="attribute">font</span>:<span class="number">14px</span> Verdana,Helvetica,Arial,sans-serif; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">table</span> &#123; </span><br><span class="line">    <span class="attribute">border-collapse</span>:collapse; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">    <span class="attribute">overflow-y</span>: scroll;</span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">"."</span>; </span><br><span class="line">    <span class="attribute">display</span>: block; </span><br><span class="line">    <span class="attribute">height</span>:<span class="number">0</span>; </span><br><span class="line">    <span class="attribute">clear</span>:both; </span><br><span class="line">    <span class="attribute">visibility</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.clearfix</span> &#123; </span><br><span class="line">    *zoom:1; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><code>mobile meta</code>标签</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">”viewport”</span> <span class="attr">content</span>=<span class="string">”width</span>=<span class="string">320,target-densitydpi</span>=<span class="string">dpi_value,initial-scale</span>=<span class="string">1,</span> <span class="attr">user-scalable</span>=<span class="string">no”/</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>表格不被撑开</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">table-layout</span>: <span class="selector-tag">fixed</span>; <span class="selector-tag">word-break</span>: <span class="selector-tag">break-all</span>;;<span class="selector-tag">border-collapse</span>: <span class="selector-tag">collapse</span></span><br></pre></td></tr></table></figure>
<ul>
<li>不设宽高居中</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">”abc”</span> <span class="attr">style</span>=<span class="string">”display:table;text-align:center;width:100%;height:100%;”</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">”background:#f00;</span> <span class="attr">display:table-cell</span>; <span class="attr">vertical-align:middle</span>;”&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">”button”</span> <span class="attr">value</span>=<span class="string">”item1″</span> /&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>透明度的兼容代码</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">filter:alpha(opacity=50); /*1-100*/</span><br><span class="line"><span class="selector-tag">-moz-opacity</span><span class="selector-pseudo">:0.5</span>; <span class="comment">/*0-1.0*/</span></span><br><span class="line"><span class="selector-tag">-khtml-opacity</span><span class="selector-pseudo">:0.5</span>; <span class="comment">/*0-1.0*/</span></span><br><span class="line"><span class="selector-tag">opacity</span><span class="selector-pseudo">:0.5</span>; <span class="comment">/*0-1.0*/</span></span><br></pre></td></tr></table></figure>
<ul>
<li>文字溢出点点省略</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">white-space</span><span class="selector-pseudo">:nowrap</span>;</span><br><span class="line"><span class="selector-tag">text-overflow</span><span class="selector-pseudo">:ellipsis</span>;</span><br><span class="line"><span class="selector-tag">overflow</span><span class="selector-pseudo">:hidden</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li><p>清除浮动的几种方法</p>
<ul>
<li><p>方法一：<code>投机取巧法</code> – 不推荐</p>
<ul>
<li>直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强</li>
</ul>
</li>
<li><p>方法二：<code>overflow + zoom</code>方法  –不推荐<br> <code>.fix{overflow:hidden; zoom:1;}</code></p>
<ul>
<li>此方法优点在于代码简洁，涵盖所有浏览器</li>
</ul>
</li>
<li><p>方法三：<code>after + zoom</code>方法 -推荐–此方法可以说是综合起来最好的方法了</p>
<ul>
<li><code>clearfix</code>只应用在包含浮动子元素的父级元素上</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.fix</span>&#123;<span class="attribute">zoom</span>:<span class="number">1</span>;&#125;</span><br><span class="line"><span class="selector-class">.fix</span><span class="selector-pseudo">:after</span>&#123;</span><br><span class="line">     <span class="attribute">display</span>:block; </span><br><span class="line">     <span class="attribute">content</span>:<span class="string">'clear'</span>; </span><br><span class="line">     <span class="attribute">clear</span>:both;</span><br><span class="line">     <span class="attribute">line-height</span>:<span class="number">0</span>; </span><br><span class="line">     <span class="attribute">visibility</span>:hidden;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>更多代码片段详情<ul>
<li><a href="http://www.jianshu.com/p/e878122a92a3" target="_blank" rel="noopener">实用的60个CSS代码片段</a></li>
</ul>
</li>
</ul>
<h5 id="一些总结"><a href="#一些总结" class="headerlink" title="一些总结"></a>一些总结</h5><hr>
<ul>
<li><p>自动继承属性：</p>
<ul>
<li><code>color</code></li>
<li><code>font</code></li>
<li><code>text-align</code></li>
<li><code>list-style</code><br>…</li>
</ul>
</li>
<li><p>非继承属性：</p>
<ul>
<li><code>background</code></li>
<li><code>border</code></li>
<li><code>position</code><br>…</li>
</ul>
</li>
<li><p>具有破坏性的元素：</p>
<ul>
<li><code>float</code></li>
<li><code>display:none;</code></li>
<li><code>position:absoblute/fixed/sticky;</code></li>
</ul>
</li>
<li><p>具有包裹性的元素：</p>
<ul>
<li><p><code>display:inline-block/table-cell</code></p>
</li>
<li><p><code>position:absolute/fixed/sticky</code></p>
</li>
<li><p><code>overflow:hidden/scroll</code></p>
</li>
</ul>
</li>
<li><p>消除图片底部间隙的方法</p>
<ul>
<li><p>图片块状化-无基线对齐<br><code>img{display:block;}</code></p>
</li>
<li><p>图片底线对齐<br><code>img{vertical-align:bottom;}</code></p>
</li>
<li><p>行高足够小 - 基线位置上移<br><code>.box{line-height:0;}</code></p>
</li>
</ul>
</li>
</ul>
<h5 id="一些概念"><a href="#一些概念" class="headerlink" title="一些概念"></a>一些概念</h5><hr>
<ul>
<li><p>BFC</p>
<ul>
<li>BFC全称<code>”Block Formatting Context”</code> 中文为“块级格式化上下文”</li>
</ul>
<ul>
<li><p>记住这么一句话：<code>BFC</code>元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素</p>
</li>
<li><p><code>BFC</code>就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此</p>
</li>
<li><p>扩展阅读</p>
<ul>
<li><a href="https://github.com/dwqs/blog/issues/22" target="_blank" rel="noopener">CSS中的BFC</a></li>
</ul>
</li>
</ul>
</li>
<li>优雅降级(<code>graceful degradation</code>)<ul>
<li>一开始就构建完整的功能，然后再针对低版本浏览器进行兼容</li>
</ul>
</li>
<li>渐进增强 <code>progressive enhancement</code>：<ul>
<li>是在浏览器开启<code>JavaScript</code>功能后，如果浏览器版本不支持某些  <code>JavaScript</code>  能力，我们解决这种问题的方式</li>
</ul>
</li>
<li>平稳退化<ul>
<li>是在浏览器没有<code>JavaScript</code>功能，或没有开启<code>JavaScript</code>功能情况下，我们解决这种问题的方式；</li>
</ul>
</li>
</ul>
<h5 id="方案荟萃扩展阅读"><a href="#方案荟萃扩展阅读" class="headerlink" title="方案荟萃扩展阅读"></a>方案荟萃扩展阅读</h5><hr>
<ul>
<li><p><strong>关于布局</strong></p>
<ul>
<li><a href="http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/" target="_blank" rel="noopener">垂直居中</a></li>
<li><a href="http://codepen.io/shshaw/full/gEiDt" target="_blank" rel="noopener">css完全居中</a></li>
<li><a href="http://www.w3cplus.com/collective-5.html" target="_blank" rel="noopener">居中之美</a></li>
<li><a href="http://www.zhihu.com/question/35290742#answer-20340542" target="_blank" rel="noopener">网页中的底部foot定位</a></li>
<li><a href="http://www.webhek.com/css-100-percent-height" target="_blank" rel="noopener">页面高度100%</a></li>
<li><a href="https://github.com/phoetry/textareaAutoHeight" target="_blank" rel="noopener">textarea高度自适应</a></li>
<li><a href="http://dotdotdot.frebsite.nl/" target="_blank" rel="noopener">多行溢出省略</a></li>
<li><a href="http://jinlong.github.io/2015/05/24/css-retina-hairlines/" target="_blank" rel="noopener">Retina屏1px线</a></li>
<li><a href="https://github.com/philipwalton/flexbugs" target="_blank" rel="noopener">Flexbugs</a></li>
</ul>
</li>
<li><p><strong>其他</strong></p>
<ul>
<li><a href="http://www.stepday.com/topic/?690" target="_blank" rel="noopener">IF IE ENDIF条件判断之IE10</a></li>
<li><a href="http://www.zhihu.com/question/20158063" target="_blank" rel="noopener">Chrome 翻译插件</a></li>
<li><a href="http://blog.netsh.org/posts/website-retina_1779.netsh.html" target="_blank" rel="noopener">网页retina优化</a></li>
<li><a href="http://segmentfault.com/a/1190000002407912" target="_blank" rel="noopener">常用meta</a></li>
<li><a href="http://www.cnblogs.com/mq0036/p/3531848.html" target="_blank" rel="noopener">树状菜单</a></li>
<li><a href="http://www.w3ctrain.com/2015/07/24/comprehensive-guide-when-to-use-em-vs-rem/" target="_blank" rel="noopener">em vs rem</a></li>
<li><a href="https://github.com/classicemi/blog/issues/3#issuecomment-113861251" target="_blank" rel="noopener">css vs js</a></li>
<li><a href="http://www.w3cplus.com/solution/index/index.html" target="_blank" rel="noopener">css解决方案（w3cplus）</a></li>
<li><a href="http://riccardoscalco.github.io/textures/" target="_blank" rel="noopener">Textures生成纹理</a></li>
<li><a href="http://una.im/CSSgram/" target="_blank" rel="noopener">CSSgram</a></li>
<li><a href="http://zmoazeni.github.io/csscss/" target="_blank" rel="noopener">Csscss（检查重复声明等）</a></li>
</ul>
</li>
</ul>
<h4 id="附录四-部分工具资源"><a href="#附录四-部分工具资源" class="headerlink" title="附录四 部分工具资源"></a>附录四 部分工具资源</h4><hr>
<ul>
<li><a href="http://blog.poetries.top/2016/03/14/Emmet%EF%BC%9AHTML-CSS%E4%BB%A3%E7%A0%81%E5%BF%AB%E9%80%9F%E7%BC%96%E5%86%99%E7%A5%9E%E5%99%A8/">学会使用Emmet插件快速编码</a></li>
<li><a href="http://blog.poetries.top/2016/09/09/Emmet%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/#more">Emmet常用快捷键</a></li>
<li><a href="https://github.com/poetries/mywiki/blob/master/bookmark/sublime-text.md" target="_blank" rel="noopener">Sublime专题</a></li>
<li><a href="https://github.com/poetries/mywiki/blob/master/bookmark/Sublime%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E6%80%BB%E7%BB%93.md" target="_blank" rel="noopener">Sublime常用插件总结</a></li>
<li><a href="https://github.com/poetries/mywiki/blob/master/bookmark/Front-End%20-Develop%20-Tools.md" target="_blank" rel="noopener">Front-End -Develop -Tools</a></li>
<li><a href="https://github.com/poetries/mywiki/blob/master/bookmark/Tools.md" target="_blank" rel="noopener">ToolsBox-自己整理的一份工具列表</a></li>
</ul>
<h4 id="附录五-编码规范"><a href="#附录五-编码规范" class="headerlink" title="附录五 编码规范"></a>附录五 编码规范</h4><hr>
<ul>
<li><a href="https://github.com/poetries/mywiki/blob/master/bookmark/%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83.md" target="_blank" rel="noopener">编码规范</a></li>
<li><a href="http://front-end-standards.com/" target="_blank" rel="noopener">前端规范</a></li>
<li><a href="https://github.com/poetries/mywiki/wiki/web-develop-standard" target="_blank" rel="noopener">web develop standard</a></li>
<li><a href="http://codecloud.net/5622.html" target="_blank" rel="noopener">Web 前端开发规范文档</a></li>
<li><a href="http://zhibimo.com/read/Ashu/front-end-style-guide/index.html" target="_blank" rel="noopener">前端开发规范手册</a></li>
</ul>
<h4 id="附录六-进阶学习"><a href="#附录六-进阶学习" class="headerlink" title="附录六 进阶学习"></a>附录六 进阶学习</h4><hr>
<ul>
<li><a href="http://www.jianshu.com/p/1e638b7da640" target="_blank" rel="noopener">DOM编程之API学习</a></li>
<li><a href="http://www.jianshu.com/p/1f2314552e23" target="_blank" rel="noopener">JavaScript基础学习</a></li>
</ul>
<h4 id="附录七-其他资源"><a href="#附录七-其他资源" class="headerlink" title="附录七 其他资源"></a>附录七 其他资源</h4><hr>
<ul>
<li><a href="https://github.com/poetries/mywiki" target="_blank" rel="noopener">Github上前端学习资源汇总</a></li>
<li><a href="https://github.com/poetries/mywiki/tree/master/front-end" target="_blank" rel="noopener">WEB 前端开发学习笔记</a></li>
<li><a href="https://github.com/poetries/mywiki/wiki/%E6%94%B6%E9%9B%86%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7" target="_blank" rel="noopener">前端开发工具箱</a></li>
<li><a href="https://segmentfault.com/a/1190000006689923" target="_blank" rel="noopener">148个资源让你成为CSS专家</a></li>
<li><a href="http://zh.learnlayout.com/" target="_blank" rel="noopener">学习CSS布局-经典必看</a></li>
</ul>
<h4 id="附录八-常见问题"><a href="#附录八-常见问题" class="headerlink" title="附录八 常见问题"></a>附录八 常见问题</h4><hr>
<ul>
<li><p>前端指路</p>
<ul>
<li><a href="http://www.w3cplus.com/css/write-to-front-end-developer-interview.html" target="_blank" rel="noopener">写给前端面试者（w3cplus）</a></li>
<li><a href="http://jiongks.name/blog/how-to-become-a-great-front-end-engineer/" target="_blank" rel="noopener">如何成为一名卓越的前端工程师（勾三股四博客）</a></li>
<li><a href="http://www.epubit.com.cn/article/144" target="_blank" rel="noopener">什么是全栈工程师</a></li>
<li><a href="https://uptodate.frontendrescue.org/zh/" target="_blank" rel="noopener">如何跟上前端开发的最新前沿</a></li>
<li><a href="http://blog.jobbole.com/12749/" target="_blank" rel="noopener">浏览器的工作原理</a></li>
<li><a href="http://www.zhihu.com/question/20269059#answer-19718763" target="_blank" rel="noopener">移动前端开发和 Web 前端开发的区别</a></li>
<li><a href="http://segmentfault.com/q/1010000003723038?utm_source=weekly&amp;utm_medium=email&amp;utm_campaign=email_weekly" target="_blank" rel="noopener">大型网站CSS编写与维护</a></li>
<li><a href="http://segmentfault.com/q/1010000003059724" target="_blank" rel="noopener">CSS核心技术关键字</a></li>
</ul>
</li>
<li><p>性能/规范/实践</p>
<ul>
<li><a href="http://www.chinaw3c.org/how-to-read-spec-wxx.html" target="_blank" rel="noopener">如何阅读W3c规范(王晓轩)</a></li>
<li><a href="http://www.chinaw3c.org/how-to-read-spec-gb.html" target="_blank" rel="noopener">如何阅读W3c规范(高博)</a></li>
<li><a href="https://developer.yahoo.com/performance/rules.html" target="_blank" rel="noopener">雅虎web性能优化军规</a></li>
<li><a href="http://browserdiet.com/zh/" target="_blank" rel="noopener">权威前端性能指南</a></li>
<li><a href="http://www.html-js.com/article/Front-end-home-best-practice-in-front-of-the-web-high-performance-CSS" target="_blank" rel="noopener">高性能css</a></li>
</ul>
</li>
<li><p>一些问答社区</p>
<ul>
<li><a href="https://www.quora.com/" target="_blank" rel="noopener">quora</a></li>
<li><a href="http://stackoverflow.com/" target="_blank" rel="noopener">stackoverflow</a></li>
<li><a href="http://www.zhihu.com/" target="_blank" rel="noopener">知乎</a></li>
<li><a href="http://www.html-js.com/qa" target="_blank" rel="noopener">前端乱炖问答区</a></li>
<li><a href="http://segmentfault.com/questions/newest" target="_blank" rel="noopener">segmentfault问答区</a></li>
</ul>
</li>
</ul>
<h4 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h4><hr>
<ul>
<li><a href="https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/DIV+CSS%E7%B3%BB%E7%BB%9F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E5%9B%9E%E9%A1%BE.md" target="_blank" rel="noopener">本文Mardown原文件-欢迎转载</a></li>
</ul>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2016/09/05/标准盒子模型和IE盒子模型/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2016/09/07/CSS中的BFC/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
